You are viewing limited content. For full access, please sign in.

Question

Question

How to force Custom Html field fonts to all stay the same.

Forms Version 10
Updated January 17, 2019
asked on January 17, 2019

I'm having trouble with a new form where there are about 5-6 Custom Html text boxes.  The fonts will not stay all the same.  When I go in to tweak some words, often the end result will be that some of the fonts have randomly changed.  Rather than having to rebuild whole html fields in order to reset the fonts, I have been exploring CSS to force them all to look the same, but have not been successful.

With help from some others, on another post https://answers.laserfiche.com/questions/153896/How-to-add-a-nontheme-font-across-a-whole-form#154089 I have tried adding a CSS class to the fields and using this:  

, but this has not worked.  I have tried out some javascript, as well, however, I am not familiar enough with javascript creation to come up with the right coding to make that work.  Can anyone help me?  The two fields I'm testing with are #q29 and #q47, but there are at least 3 other fields involved in this one form.

0 0

Answer

SELECTED ANSWER
replied on January 17, 2019

You could have something that is overriding it.

 

1. Have you tried a font where you will really see a difference?  When I set it to Arial I don't really see a difference.  But when I set it to something else I do see a difference.

.cf-custom {font-family: "Comic Sans MS", cursive, sans-serif;} works for me to actually see a difference.

2. Have you tried to inspect it to see if something is overriding it?  I work mostly from chrome so the following instructions are from chrome.

a) pull up a preview of your form.

b) go to one of the html fields and right-click your mouse on it.

c) from the menu choose "Inspect".

d) (should open a window to the side) scroll down the box (see image) until you find the spot that says it is inherited from the custom field.

e) if it has lines drawn through the font, then something above it is overriding your css.

inspect.png
inspect.png (126.65 KB)
Download
0 0

Replies

replied on January 17, 2019

I change my color but not my fonts.  The code I use is for ALL my custom HTML fields on the form.  If you want to just use some of them you would have to change the .cf-custom to q# and put only the fields you want on it.  My example is the color but try just putting {font: XXX (whatever font you are using)}.

The /* and */ are used to isolate it as text not CSS and I put notes about each line and what it is supposed to do so others can troubleshoot my work. So you do not need to include that part in your code.

 

/*Ensure the color of the custom HTML fields are black text unless otherwise stated in the HTML code itself.*/
.cf-custom {color: #000000}

1 0
View 9 previous replies
replied on January 17, 2019

Thanks, Jennifer.  Unfortunately, it doesn't seem to be making a difference.  I tried it in the JavaScript part and up above in the CSS window:

/*Ensure the font of the custom HTML fields are Arial text/
.cf-custom {font: Arial}

Any ideas why it's not working?  I removed all the other pieces of other things I was trying, so the CSS Class in the Advance Tab are now cleared out, etc.

0 0
replied on January 17, 2019

Try {font-family: Arial}

0 0
replied on January 17, 2019

Unfortunately, still no:  .cf-custom {font-family: Arial}

0 0
replied on January 17, 2019

How about:

.cf-custom {font-family: Arial, Helvetica, sans-serif;}

0 0
replied on January 17, 2019

Still no change.

0 0
replied on January 17, 2019

Oh, weird:  I noticed that the javascript piece (let's call it Piece 1) that I recently placed just before this font piece had stopped the other javascript (Piece 1) from working.  As soon as I removed the .cf-custom piece, Piece 1 started working again.  Even though the Piece 1 javascript has nothing to do with custom html fields.  

0 0
replied on January 17, 2019

You put the .cf-custom line down in JavaScript?  Try putting it up in the CSS part. 

 

If it is all down in the JavaScript depending on where your ; is, it is basically saying everything is done.

1 0
replied on January 17, 2019

Tried a bunch of options up in CSS, but still no change:

.cf-custom {font-family: Arial, Helvetica, sans-serif;}

.cf-custom {font-family: Arial}

.cf-custom {font-family: Arial;}

0 0
replied on January 17, 2019

There must be something blocking this.  I wonder if I should try to get support involved?

0 0
replied on January 17, 2019 • Show version history

I've now tried:

.cf-custom {font-family: Arial; letter-spacing: 0.3em;}  Which DID work, at least in the sense that I did finally see a change, which proved that the code is actually doing something!  That spaced it out too wide, though, so I tried a few things, which just took it back to what I had (the two target fields still look different).

.cf-custom {font-family: Arial; letter-spacing: normal;}

.cf-custom {font-family: Arial; letter-spacing: 2px;}

I also went back to trying bold and not bold settings.  Again, that is not it.

0 0
SELECTED ANSWER
replied on January 17, 2019

You could have something that is overriding it.

 

1. Have you tried a font where you will really see a difference?  When I set it to Arial I don't really see a difference.  But when I set it to something else I do see a difference.

.cf-custom {font-family: "Comic Sans MS", cursive, sans-serif;} works for me to actually see a difference.

2. Have you tried to inspect it to see if something is overriding it?  I work mostly from chrome so the following instructions are from chrome.

a) pull up a preview of your form.

b) go to one of the html fields and right-click your mouse on it.

c) from the menu choose "Inspect".

d) (should open a window to the side) scroll down the box (see image) until you find the spot that says it is inherited from the custom field.

e) if it has lines drawn through the font, then something above it is overriding your css.

inspect.png
inspect.png (126.65 KB)
Download
0 0
replied on January 17, 2019

Jennifer, I did try changing to Times New Roman a number of times, and to the other options you were showing and none of those times did I see any difference, except !! I did just try your Comic Sans MS coding as you have it showing above and all but one box changed font!  So now I know that only one box is somehow not responding properly.  I will remove the text in that one and pop it into Word, change it, then bring it back in.  If that doesn't make the difference, I'll delete it and start fresh with just that one.

Thanks, Jennifer, for sticking it out with me!  I really didn't want to have to rebuild all of the custom html fields!!

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Attachments
Related Posts
Loading ...