What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to change font size and tab width of Form Tabs widget

    Asked by cmsacomms on January 28, 2016 at 10:55 PM

    Hi, I'm trying to change the font size and tab width on the widget tab using custom CSS but it is not changing anything. The reason I want to change it is I have a lot of tabs (14) for my form and want them smaller. Perhaps it is because I have overriding styles in the main CSS styles of the form but I do not know how/where I should change this so just the tab font sizes will change ...

     

     

     

     

     

    Page URL:
    http://www.jotformpro.com/50987923211963

    Screenshot
    size font size font form tabs form tabs widget
  • Profile Image
    JotForm Support

    Answered by Boris on January 29, 2016 at 07:49 AM

    The problem is caused by one of the existing CSS rules on the form, which is setting 13px font-size to all elements:

    * {
    font-family: "Metrophobic", sans-serif;
    font-size: 13px;
    }

    So even though the CSS you have used inside the widget is correct, the CSS of the form is setting the elements inside the .tabs-list li to have 13 pixels font-size. You may want to try using this CSS in the widget instead:

    .tabs-list .liContent { font-size: 8px; }

    If you also want to reduce horizontal width of the tabs, you can use a CSS rule such as this one:

    .tabs-list.tabs-list li { padding: 3px 14px; }

    The result of both of these rules would look like this:

    Let us know if you need further assistance, and we will be happy to help.