-
chand.damanpreetAsked 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.
-
sahackteamReplied 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.damanpreetReplied 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.
-
sahackteamReplied 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;
}
-
jonathanReplied 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
Let us know if you need further assistance.
Thanks.
-
chand.damanpreetReplied 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...
-
CharlieReplied 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:
Let us know if this works.
Thank you.
-
chand.damanpreetReplied 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.
-
CharlieReplied 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
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.damanpreetReplied 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.
-
CharlieReplied 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.
-
CharlieReplied 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.