How to center menu options using Form Tabs Widget?

  • Profile Image
    Advolink1
    Asked on August 30, 2017 at 06:57 PM

    Hello!

    Can you, please, guide me as to how to center the tabs on my form using the Form Tabs Widget?  I have selected center in the Align property, but I believe that may be instructing widget to center text in center of each tab.  I'm not sure.  

    The forms in question are:

      https://form.jotform.us/72305370249150 

      and

      https://form.jotform.us/72349013657155

    The same fix will resolve both forms issue.

    Thank you, in advance, for your help.

    Denise

  • Profile Image
    John_Benson
    Answered on August 30, 2017 at 08:58 PM

    Hi Denise,

    I checked your form and we can provide you a custom CSS code to center the form tabs. Just to confirm, please see my screenshot below:

    - To my understanding, you want to align the form tabs to the white box on the first page?

    - If we adjust the form tabs to align with the white box on the first page. On the other pages, it will still be in the center but not aligned with the text as shown in the screenshot below:

    Let us know so we can provide you a solution. Thank you.

     

  • Profile Image
    John_Benson
    Answered on August 30, 2017 at 08:59 PM

    Hi Denise,

    I checked your form and we can provide you a custom CSS code to center the form tabs. Just to confirm, please see my screenshot below:

    - To my understanding, you want to align the form tabs to the white box on the first page?

    - If we adjust the form tabs to align with the white box on the first page. On the other pages, it will still be in the center but not aligned with the text as shown in the screenshot below:

    Let us know so we can provide you a solution. Thank you.

     

  • Profile Image
    Advolink1
    Answered on August 31, 2017 at 12:41 AM

    Yes.  That is exactly what I am asking for.

    Thank you for your assistance.

    Denise

  • Profile Image
    Mike_G
    Answered on August 31, 2017 at 01:27 AM

    Please add the following CSS codes below to your form following the instruction in this guide — How-to-Inject-Custom-CSS-Codes

    ul#tabs-list {

        text-align: center !important;

    }

    I hope this helps. If you have other questions, please feel free to contact us anytime.

  • Profile Image
    Advolink1
    Answered on August 31, 2017 at 01:35 AM

    Works fantastic!

    Thank you very much!

    Denise