How to center the form tabs widget?

  • Profile Image
    Benflips
    Asked on December 19, 2014 at 05: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.
  • Profile Image
    Ben
    Answered 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

  • Profile Image
    abajan
    Answered on December 19, 2014 at 09: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:


    Thanks

  • Profile Image
    Benflips
    Answered 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?

    ...
  • Profile Image
    jonathan
    Answered on December 20, 2014 at 07:36 AM

    Hi,

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

    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.

     

    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.