How can I make the Tabs vertical instead of horizontal?

  • Profile Image
    starterfly
    Asked on October 20, 2016 at 04:07 PM
  • Profile Image
    Jim_R
    Answered 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:

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

  • Profile Image
    Jim_R
    Answered on October 21, 2016 at 01: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.