Change look/font size of Tabs descriptions

  • Profile Image
    mfjbenson
    Asked on October 31, 2020 at 03: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_

  • Profile Image
    jonathan
    Answered on October 31, 2020 at 06: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


    Let us know if you need further assistance.

  • Profile Image
    mfjbenson
    Answered on October 31, 2020 at 07:28 PM
    Thank you. How about the size of the tab itself? Can I make that smaller,
    too?
    ...
  • Profile Image
    jonathan
    Answered on October 31, 2020 at 08: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


    Let us know if you need further assistance.



  • Profile Image
    mfjbenson
    Answered on October 31, 2020 at 09:33 PM

    Thank you!