Customized CSS for Vertical Form Tabs

  • chaofeng
    Asked on July 24, 2015 at 8:33 PM

    Dear awesome jotform,

     

    I'm now using the FormTab widget for my multi-page form. Instead of listing the Form Tabs inline, I'd hope the tabs to be displayed vertically. I copied an early form from another question (http://www.jotform.com/answers/524488-Vertical-alignment-and-responsiveness-of-Tab-List-Widget) but I don't really need a large customized css file.

    The current form I am editing can be found here: http://form.jotform.ca/form/52036035334243

    While the form tabs are now displayed vertically and positioned next to the body of the form, I am having trouble positioning the body of the form. Ideally I hope the form body can be always positioned, say, 90 px away from the tabs. Can you please help me to locate the line in the customized css that adjusts the positioning of the form body? Or I would really appreciate it if you show me an simple example about how to customize css to position the form tabs and form body side by side.

    Thanks a lot for all the help!

     

    Best,

    Chao

     

     

  • Boris
    Replied on July 24, 2015 at 10:21 PM

    If I understand you correctly, you would like to move the part that contains form fields more to the left, and be able to adjust its distance from the vertical tabs. Please open your form in the Form Designer.

    Customized CSS for Vertical Form Tabs Image 1 Screenshot 30

    In the Designer, click on the CSS tab, and adjust margin-left from 315px to something like 240px.

    Customized CSS for Vertical Form Tabs Image 2 Screenshot 41

    Don't forget to save your form, and that should be it. :)

    You can see a cloned version of your form with adjusted margin-left here:

    http://www.jotformpro.com/form/52047988205966

    Please let us know if you need further assistance, we will be happy to help.

  • chaofeng
    Replied on July 27, 2015 at 2:56 PM

    Thanks Boris (and thanks to the others who jump in to help :),

     

    Thanks for the super quick response and tips! Somehow I didn't get the notification email about the answers, so I had to google my own question to get back, but this is not at all a problem, it's just my way to say sorry that I cannot reply sooner.

    And yes, the solution worked out well. But I think there might be some bug in the designer tool: I sometimes cannot save my updates to the css (right now the margin value of ul.form-section is set to 240 but the form is overlapping the tabs). Or could this be caused by using a widget, the css of which cannot be edited through the designer tool? 

    The current form can be found here: http://form.jotform.ca/form/52036035334243?

    And here's a screenshot:

    Customized CSS for Vertical Form Tabs Image 1 Screenshot 20

    I do have a few other questions regarding the CSS, and I hope we don't need to open another thread to address them, but let me try to clarify first:

    1) I am trying to get rid of the line above the texts of the form tabs (i.e. I cannot find the css code that draws the lines above the texts on the tabs; I hope you can see these border lines in the screenshot)

    2) I am also trying to find the line of css code that adjusts the positioning of the progress bar, I've tried editing the margin-left value of the progress bar container but had no luck.

    3) It seems that the css of the form tabs widget can only be edited separately outside the designer tool, am I right? It's not a problem but I'm wondering why when I click on different tabs, sometimes the positioning of all the tabs and the form will be affected (they'll move slightly to the left or right). If you click all the tabs one by one you should be able to see the problem.

    So far these are all I need to figure out. And thanks so much for attending to my questions, you guys have been really helpful!

     

    Best,

    Chao

  • chaofeng
    Replied on July 27, 2015 at 3:29 PM

    Hi,

     

    Just some updates of the above questions:

    First of all, sorry about accusing that the designer tool has bugs, it turned out it's because I missed the px unit after the numbers I have been input. So now I know how to adjust the positions of the progress bar and also the positioning of the form body (but I don't quite understand what the element "form-all" is responsible for, but that's a side question that is not very relevant). 

    Here's a link to the updated form:

    http://form.jotform.ca/form/52075746696266?

    So please just help me with my question 1) and 3), thanks for the help! 

     

    Best,

    Chao

  • Mike_G JotForm Support
    Replied on July 27, 2015 at 5:25 PM

    1) I am trying to get rid of the line above the texts of the form tabs (i.e. I cannot find the css code that draws the lines above the texts on the tabs; I hope you can see these border lines in the screenshot)

    To eliminate that you can add the CSS codes below to your form: 

    #tabs-list li:hover {

    border: 0px;

    }

    #tabs-list li {

    border: 0px;

    }

    .current {

    border: 2px solid #444444 !important;

     

    }

    3) It seems that the css of the form tabs widget can only be edited separately outside the designer tool, am I right? It's not a problem but I'm wondering why when I click on different tabs, sometimes the positioning of all the tabs and the form will be affected (they'll move slightly to the left or right). If you click all the tabs one by one you should be able to see the problem.

    Your form moves slightly to the right when this "Event Info" tab is selected. Maybe because it(form-all) adjusts itself to give way for the scroll bar on the right side of the browser since that form-section is long (when it comes to height).

    Add the CSS code below and it should fix the issue.

    .form-all{

    margin-left: 449px !important;

    margin-right: 449px !important;

     

    }

    As for the result: 

    Customized CSS for Vertical Form Tabs Image 1 Screenshot 30

    Just to answer your question about ".form-all"

    .form-all is the class name of the <div> that holds your form.

    Customized CSS for Vertical Form Tabs Image 2 Screenshot 41

    By the way, here is the form I have used for testing: http://form.jotformpro.com/form/52076404099962?

    I hope I was able to help you. Should you need any further assistance, please feel free to let us know and we will be glad to help you. Thank you. 

  • chaofeng
    Replied on July 27, 2015 at 7:57 PM

    Thanks so much, Mike! 

    Yes, I've followed your steps and just got rid of the lines above the tabs, and thanks also for trouble-shooting for the tab shifting issue I was having. I think you are right, the scroll bar did take some space so the tabs and form items got repositioned. 

    Now the updated form is here: http://form.jotform.ca/form/52075746696266?

    I am wondering, however, if it's possible to position the whole form in the center of the page. That is, instead of setting the margin-left and margin-right to fixed values, can I make the whole form be positioned in the centre of the page, with equal margin space to left and right? 

    I also wonder how I can adjust the width of the inputs, I adjusted the width value of the form-input-wide to 640, but this seems not working as I expected. The width of the input fields is now about 380px.

    Thanks so much again, I really appreciate all the help from you guys.

    Best,

    Chao

  • Elton Support Team Lead
    Replied on July 28, 2015 at 2:26 AM

    @Chao,

    To center align the entire form, these minor adjustments on the existing CSS codes will help make it possible.

    Please find these CSS codes injected to your form and remove only the properties I have marked in bold (margin-left : 240px;).

    ul.form-section {

    margin-left : 240px;

    }

    .progressBarContainer {

    margin-left : 240px;

    width : 640px !important;

    }

    Then add this CSS codes to your form to make the form center aligned as well as expand the fields to its maximum width which is 640px.

    .form-all {padding-left: 180px !important;}

    .form-line {width: 100% !important;}

    And then on the form tabs widget, please update the margins with the following.

    margin: 0% 70% -85% -14% !important;

    Customized CSS for Vertical Form Tabs Image 1 Screenshot 20

    Here's my form version: http://form.jotformpro.com/form/52081703950956? 

    If you need further help, do let us know.

  • chaofeng
    Replied on July 29, 2015 at 6:29 PM

    @EltonCris

    Thanks so much for your example, I've studied the code and now I have a better idea about how to layout the form through editing css. II'll probably ask questions again as I go, but I think I have a better handle.

    Thanks so much for all the help, I really appreciate it. 

    Best,

    Chao

  • jonathan
    Replied on July 30, 2015 at 12:56 AM

    Thank you for taking the time letting us know all is good now. =)

    On behalf of my colleagues who assisted on this thread, you're quite welcome.

    Contact us again anytime should you need further assistance.

     

    Cheers