What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to center the form tabs widget?

    Asked by Benflips 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.
    Form tabs Form Tabs widget CSS center widget
  • Profile Image

    Answered by Ben 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
    JotForm Support

    Answered by abajan 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

    Answered by Benflips 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
    JotForm Support

    Answered by jonathan 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.