Adjusting Form Collapse Bars Height and Spacing in Betweens

  • chand.damanpreet
    Asked 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.

    Jotform Thread 507304 Screenshot
  • sahackteam
    Replied 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.

  • chand.damanpreet
    Replied on January 31, 2015 at 1:21 PM

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

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

    Adjusting Form Collapse Bars Height and Spacing in Betweens Image 1 Screenshot 20

     

  • sahackteam
    Replied on January 31, 2015 at 2: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;

     

    }

  • jonathan
    Replied on January 31, 2015 at 7:22 PM

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

    Adjusting Form Collapse Bars Height and Spacing in Betweens Image 1 Screenshot 20

    Let us know if you need further assistance.

    Thanks.

     

  • chand.damanpreet
    Replied on February 2, 2015 at 6: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...

  • Charlie
    Replied on February 2, 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:

    Adjusting Form Collapse Bars Height and Spacing in Betweens Image 1 Screenshot 20

     

    Let us know if this works.

    Thank you.

  • chand.damanpreet
    Replied on February 3, 2015 at 4: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.

  • Charlie
    Replied on February 3, 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 

    Adjusting Form Collapse Bars Height and Spacing in Betweens Image 1 Screenshot 20

     

    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.

  • chand.damanpreet
    Replied on February 3, 2015 at 10:39 AM

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

  • Charlie
    Replied on February 3, 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.

  • Charlie
    Replied 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.