Change look/font size of Tabs descriptions

  • mfjbenson
    Asked on October 31, 2020 at 3:56 PM

    Is there a way to change thefont size of the tab descriptors? Here is what I have now, but I'd like to make them smaller so that they don't consume so much of the form real estate.

    1604174177 5f9dc161deacd  Screenshot 10

  • jonathan
    Replied on October 31, 2020 at 6:34 PM

    You can do it by injecting custom CSS codes in the Custom CSS option of the Form Tabs widget in your form.

    Example, to make font-size 10px smaller in size.

    .liContent {
    font-size : 10px;
    }


    1604183611 5f9de63b9ca0d zzz 2020 11 01 Screenshot 10


    Let us know if you need further assistance.

  • mfjbenson
    Replied on October 31, 2020 at 7:28 PM
    Thank you. How about the size of the tab itself? Can I make that smaller,
    too?
    ...
  • jonathan
    Replied on October 31, 2020 at 8:53 PM

    Please try adding the next CSS codes to the Custom CSS of the form tabs widget

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

    Unfortunately this is the maximum numbers that can be used, otherwise the tabs will be overlapping in between if the px numbers will be more than.

    Example result:

    1604191977 5f9e06e9777e2 zzz 2020 11 01 Screenshot 10


    Let us know if you need further assistance.



  • mfjbenson
    Replied on October 31, 2020 at 9:33 PM

    Thank you!