Font sizes in list - separate from question header

  • caesib
    Asked on March 22, 2014 at 3:07 AM

     

    When I use Matrix, it seems that when I have a text field above it, it wants to control the font size in the Matrix.  So I ended up with a huge text for wording on the question, and sort of readable text in the matrix. I would like to have the matrix in about 12-14 point type and the question in sold in 14 point. Instead, I had like 14 or 16 in the question and it looked like about 8 point in the matrix.

     

    I would like to get the font size larger on all the Lists - but I am not seeing 'how' to do this - the font adjustment doesn't seem to be in the list area.

     

    I'm dealing with many seniors. The form has to be more legible. Larger font sizes.

     

    Thanks.

  • Cesar
    Replied on March 22, 2014 at 4:47 PM

    If you need to increase the font on the Matrix, Kindly try embedding the following CSS Code to your form: 

    #cid_58, table, tbody
    {
    font-size: 1.3em;
    }

    Example Form: http://form.jotformpro.com/form/40806466241957

    This is my example form, if you need further assistance. do let us know. Thank you.

     

    Related Article:

    How-to-Clone-an-Existing-Form-from-a-URL

  • caesib
    Replied on March 22, 2014 at 4:50 PM

    Hi, Cesar - I can't figure out "where" to put in your code.

    I'm on Jot Form - how do I put the code in - ? Your corrections to my form are awesome - but I couldn't figure out how to see what you did or where.

     

    Yes - need further help. By any change - would you know "why" the font size varies on iphone when I pull up my form? Even in the same list the font size varies like crazy - it's a mess!

     

    Thanks.

     

    Caesi

  • David JotForm Support Manager
    Replied on March 22, 2014 at 9:47 PM

    1. While editing the form into the form builder, Click Setup & Embed tab and click Preferences from the toolbar

    Font sizes in list   separate from question header Image 1 Screenshot 30

    2. On the Preferences window, go to Form Styles tab and then insert your CSS Code under Inject Custom CSS Box. (If you see code, just press enter after the last curly bracket, and paste the code provided by my collegue.)

    Font sizes in list   separate from question header Image 2 Screenshot 41


  • caesib
    Replied on March 23, 2014 at 10:46 PM

    Hi, BDavid and Cesar - Thank you I found "where" to put the code - but it hasn't solved the problem.

    I have "larger" font now in the matrix. But if I try to enlarge the font in the wording "Please put a dot in the rating for each area." it is still linked  in some way - so if I change the font size for that "Please put..." line, then the header for the question becomes HUGE. ( I found a "work-around" and dumped the Headers and just went with a "text box". But is this a glitch - that the one field is trying to reference off of the other?

     

    Same type of problem, I am having throughout the form. I like the em size Cesar came up with 1.3 em. That'll work for me - then need to just go larger for Headline (see my #1 or #2) and I'm not sure if the "Please put..." line is considered subHeader. I didn't make it that way.

    iphone - (changes made look better on "web" via Firefox- iPhone - form still is a mess font-size wise.)

    The iphone layout the font size varied so much within the same form lists that it looks "drunk".

    - Question #1: "My aging parents...", "My parents are caring for..."I need help with expenses...", "I have caregiver depression..." - the font size in those options in the SAME list - are like double the font size.

     

    Most of the problems I found work-arounds or fixed - - but still need help figuring out why the smart phone form display is a mess.

    Thanks.

  • Ashwin JotForm Support
    Replied on March 24, 2014 at 2:57 AM

    Hello caesib,

    No the text "Please put a dot in the rating for each area." is not a header but it just a question label and the class is "form-label-top". If you want just this question label to be the same size as of the matrix rows, you need to increase the font size of just this form element.

    Please inject the following custom css in your form:

    #cid_58, table, tbody

    {font-size: 1.3em;}

    #label_58{font-size: 1.3em;}

    The following guide should help you inject the custom css in your form:  http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    Please take a look at the following form and see if this looks okay to you:  http://form.jotformpro.com/form/40821791417960? Feel free to clone this form for closer look. The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

     

    I did check this form in my iPhone device and it seems to display the fonts as expected. Do check and let us know if you see any difference in any questions.

    Thank you!