How to center the form tabs widget?

  • Benflips
    Asked on December 19, 2014 at 5:16 AM
    2) I didn't get a response about whether someone could either do for me (or point me in the direction of resources to learn how) a change in the CSS parameters of the Tabs widget I have used...at the moment, the tabs have angular corners than take up needed space, and they overlap the edge of the form. With the CSS, can they be centred within / across the form just to be aethetically more pleasing.
  • Ben
    Replied on December 19, 2014 at 11:11 AM

    Hi,

    I would suggest adding this CSS code to make it centered:

    .tabs-list {
        text-align: center;
    }

    You could also make them a bit more rounded by adding this CSS:

    .tabs-list li:before {
        border-radius: 0 20px;
    }
    .tabs-list li:after {
        border-radius: 20px 0;
    }

    You can see here how to Inject Custom CSS Codes.

    Do let us know if you have any further questions.

    Best Regards,
    Ben

  • abajan Jotform Support
    Replied on December 19, 2014 at 9:08 PM

    Dr. Phillips,

    I gave two responses in the original thread in which you posted the question about this issue: https://www.jotform.com/answers/477206-Assistance-with-CSS. Did you not receive a notification of either reply? If you apply the solution in my latter reply, the tabs in your jotform should look like this:

    How to center the form tabs widget? Image 1 Screenshot 20


    Thanks

  • Benflips
    Replied on December 19, 2014 at 10:11 PM
    Thank you. I have made the changes as per your original post. Apologies if
    I had sent through the request more than once.
    The only issue now is that when you progress using the next buttons, the
    relevant tab does not highlight. It does if you progress thru by clicking
    the tab itself, but not if you navigate with the next button.
    Is this a CSS issue?

    ...
  • jonathan
    Replied on December 20, 2014 at 7:36 AM

    Hi,

    I was able to see the what you described on your jotform http://www.jotform.co/form/43497387197877

    How to center the form tabs widget? Image 1 Screenshot 30

    the correct Form tab was not highlighted if you will use the Next button to progress on the form. It only become highlighted when you click on them directly.

    BUT I think this is not a bug. This is the default behavior of Form Tabs widget.

    If you can test my jotform http://www.jotform.me/form/43533321853451 you will see the default actions.

    How to center the form tabs widget? Image 2 Screenshot 41

     

    I will see if I can come up with the correct CSS code to use to make the functionality you mentioned doable.

    We will let you know when we have this.

    Hope this help. Please inform us if you have further concern.

    Thanks.