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

    Adjusting Form Collapse Bars Height and Spacing in Betweens

    Asked by chand.damanpreet on January 31, 2015 at 12:15 PM

    These form bars are very thick and covers huge space of the screen. Please tell me , how can I make these collapse bars thinner. May he half of the size of what they are.

    Screenshot
    make form size and
  • Profile Image

    Answered by sahackteam on January 31, 2015 at 12:24 PM

    Hi, you can inject this custom css code.

    //You can change the size of the height of your liking.

    .form-collapse-table {

        height : 30px;         

    }

     

    // this is to adjust the sentences of the text to match the size of your collapse table 

    .form-collapse-mid {

        margin-top : 5px;       

    }

     

    Just play around with the values to your prefer.

  • Profile Image

    Answered by chand.damanpreet on January 31, 2015 at 01:21 PM

    This is what I got, How to fix this???

    I need all bars together and no too far from each other.

     

  • Profile Image

    Answered by sahackteam on January 31, 2015 at 02:22 PM

    Hi, you can try replacing the css code with this instead.

    .form-collapse-table {

        height : 25px;

    }

     

    .form-collapse-mid {

        text-align : center;

    }

     

    .form-section-closed {

        overflow : hidden;

        clear : both;

        height : 40px!important;

     

    }

  • Profile Image
    JotForm Support

    Answered by jonathan on January 31, 2015 at 07:22 PM

    You can use the Form Designer to graphically tinker with the height, max-height of the collapse field using the CSS Editor

    Let us know if you need further assistance.

    Thanks.

     

  • Profile Image

    Answered by chand.damanpreet on February 02, 2015 at 06:45 PM

    That did not work, I am able to adjust heigh of the collapse, however if I make collapse bars thinner, they are far away from each other and not able to find a way to make then nearer. See my previous screenshot...

  • Profile Image
    JotForm Support

    Answered by Charlie on February 02, 2015 at 10:00 PM

    Hi,

    You can try adding this custom CSS code in your Designer->CSS Tab:

    ul:nth-child(5) > .form-section {

        height : 50px !important;

    }

    That should cover the whole height of each form collapse bar, you can however, adjust the height to your preferences. I've cloned your form for testing purposes, you can see the change in my end here: http://form.jotformpro.com/form/50328331371952 

    Here's a screenshot:

     

    Let us know if this works.

    Thank you.

  • Profile Image

    Answered by chand.damanpreet on February 03, 2015 at 04:50 AM

    When i did this, it actually does not show the hidden questions when I click on the bar to uncollapse it.

    Can u do me a favor. Please make the bar thinner and make the stick together, gap should be 0 between two collapse bars when collapsed. When uncollapsed, it should show the hidden questions then. As you could see the screen shot which was provided by me earlier.

  • Profile Image
    JotForm Support

    Answered by Charlie on February 03, 2015 at 10:06 AM

    Hi,

    Apologies for that, my mistake on that part.

    Here's the edited custom CSS code.

    .form-collapse-table {

        padding : 12px 12px 12px 30px;

        margin-top : 0px;

        height: 50px !important;

    }

    This is the part where I list all the collapse part that is closed and the gap will be edited here, just edit the height for the space betwee.

    #section_18, #section_23, #section_37, #section_56, #section_59, #section_66, #section_75 {

        height: 55px !important;

    }

     

    Here's the demo form: http://form.jotformpro.com/form/50328331371952 

     

    Make sure that the CSS custom code is not conflicting with other codes, make sure to remove duplicates to avoid problems. 

    I hope this helps. Do let us know if you need more editing on this.

    Thank you.

  • Profile Image

    Answered by chand.damanpreet on February 03, 2015 at 10:39 AM

    Still you did not resolve my issue. Anyways, forget it. I'll live with what I have.

  • Profile Image
    JotForm Support

    Answered by Charlie on February 03, 2015 at 10:58 AM

    Hi,

    I apologize if the code did not work. Let me check this further and I'll get back to you with a better CSS code and guide.

    Kind regards.

  • Profile Image
    JotForm Support

    Answered by Charlie on February 15, 2015 at 11:58 AM

    Hi,

    Sorry for the delay in response. Could you check this demo form again: http://form.jotformpro.com/form/50328331371952. See if that works for you, although the sliding down of the form collapse bar is quite not smooth, but the display should be alright now. You can clone the edited form using this guide: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    So basically, it's this code that seems to work:

    .form-section-closed#section_18, .form-section-closed#section_23, .form-section-closed#section_37, .form-section-closed#section_56, .form-section-closed#section_59, .form-section-closed#section_66, .form-section-closed#section_75 {

        height : 45px !important;

        clear: both !important;

        hidden: oveflow !important;

    }

    Do let us know if you need to make adjustments on this.

    Thank you.