Form tabs with a specific style

  • zawadil
    Asked on December 1, 2015 at 12:43 PM

    Hi support !

    I checked several postings concerning the form tabs and tried also by myself to create my own tabs based on the different informations. The tab style I want to create should look like the one I found in the following posting

    How to center the form tabs widget?

    Asked by Benflips on December 19, 2014 at 05:16 AM

    which means all tabs centered with no spacing between. It would be great, if you can give me the necessary custom css code to achive this.

    Thank you in advance for your assistance.

    Best regards

    Erwin

     

  • victor
    Replied on December 1, 2015 at 2:43 PM

    I am assuming that you would like to replicate the tabs this user created for his form. To create your tabs look the same, you may try inserting the following code in the tab wizard:

    Form tabs with a specific style Image 1 Screenshot 20

    .tabs-list {
    margin-top: 12px;
    text-align: center;
    }

    .tabs-list li {
    margin-left: 1px;
    margin-right: 1px;
    border-top: 1px solid green;
    border-left: 1px solid green;
    border-right: 1px solid green;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    }

    .tabs-list li .liBefore {
    border: 0;
    }

    .tabs-list li .liAfter {
    border: 0;
    }

    .tabs-list li {
    padding: 3px 40px;
    }

    Please let us know if this helps.

  • zawadil
    Replied on December 3, 2015 at 9:09 AM

    Hello Victor !

    Before I´ve seen your answer, I was able to puzzle out most of the configuration possibilities to fullfill my needs by comparing different postings. Your reply gives me some more details, how to adjust the form tabs and I will try it in a 2nd step. Many thanks for this.

    BR Erwin

  • mert JotForm UI Developer
    Replied on December 3, 2015 at 10:32 AM

    On behalf of my colleague Victor, you are most welcome and also, thank you for motivating words. If you need any extra help in the future, always feel free to ask us.

     

    Thanks.