How can I make the Tabs vertical instead of horizontal?

  • starterfly
    Asked on October 20, 2016 at 4:07 PM
  • Support_Management Jotform Support
    Replied on October 20, 2016 at 10:01 PM

    Hello, here's a cloned copy of your form that shows the Form Tabs vertically https://form.jotform.com/62937945457977 (if you wish to clone this, here's how).

    Now, since you never mentioned where you want it to be placed after setting it vertically, I just positioned it to the left (with a 10px distance from the edge of the form). Just change the margin values below if you need it to be moved further (e.g. say, you want it outside the form, set the margins as -20px -90px, here's how it will look like).

    .tabs-list {

       width: 150px; /* this will make it shrink and force the content to be rendered vertically */

       position: absolute;

       margin: 0 10px; /* move it a bit to the left */

    }

    Place these CSS Codes on the Form Tabs widget's properties window like so:

    How can I make the Tabs vertical instead of horizontal? Image 1 Screenshot 20

  • starterfly
    Replied on October 21, 2016 at 12:36 PM

    Thank you!

    How can I change the css code on the Sliders with calculated result to match the font and size of the rest of the form?

    https://form.jotform.com/62944917482164

  • Support_Management Jotform Support
    Replied on October 21, 2016 at 1:05 PM

    Glad that helped. I have moved your most recent question to a separate thread https://www.jotform.com/answers/968014 

    We'll have it addressed there shortly.