I want to update the CSS for the "collapse form"

  • Profile Image
    mzelicskovics
    Asked on August 04, 2011 at 10:44 PM

    I want to remove the white space between each collapsed form. They are labeled as item submissions. Here is the link to the way it looks right now and the attachment is a mockup of how I want it to look.

    http://www.shopfashionablylate.com/submit-an-item-2

    Thank You!

  • Profile Image
    mliz
    Answered on August 05, 2011 at 05:55 AM

    Hello,

    You can use the following css code to remove the white space in between
    the collapse form.

    To get to the Custom Inject CSS:

    1. Open your form in JotForm
    2. Click on 'Setup &  Embed
    3. Select 'Preferences
    4. Choose 'Form Styles' tab
    5. Add the following code in the  Inject Custom CSS section

    .form-section-closed
    {
    height: 58px;
    }

    Let us know if this works for you. Thanks for using JotForm.


    Best Regards,
    Mliz

  • Profile Image
    mzelicskovics
    Answered on August 05, 2011 at 08:34 AM

    Hi Mliz,

    I tried that, but it doesn't seem to work. Here is my custom injected CSS. Maybe I have something in there that is messing it up, I'm not sure. Could you take a look?

    .form-all {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000 !important;
    font-family: Arial;
    font-size: 11px;
    margin: 0 auto;
    padding-top: 0px;
    width: 910px;
    }
    .qq-upload-button {
    background: -moz-linear-gradient(center top , #ec008c 0%, #ec008c 100%) repeat scroll 0 0 transparent;
    border: 1px solid #C64F00;
    border-radius: 5px 5px 5px 5px;
    color: #FFFFFF;
    display: block;
    font-size: 14px;
    padding: 8px 0;
    text-align: center;
    text-shadow: 0 -1px #C64F00;
    }
    .form-collapse-mid {
    float: left;
    font-size: 14px;
    margin: 15px 45px 16px 20px;
    text-shadow: 0 2px 0 #FFFFFF;
    }
    .form-collapse-table {
    background: url("/3.0.4140/images/soft-grad.png") repeat-x scroll 0 0 #F5F5F5;
    border: 1px solid #CCCCCC;
    height: 45px;
    position: relative;
    }
    .form-collapse-right {
    height: 45px;
    position: absolute;
    right: 0;
    width: 45px;
    }
    .form-section-closed {
    height: 45px;
    overflow: hidden;
    }

  • Profile Image
    NeilVicente
    Answered on August 05, 2011 at 12:16 PM

    Hi,

    Please try this css code:

    .form-all ul + ul.form-section-closed[style] {
        height: 47px !important;
        }

    Unfortunately, this will not work with IE 6 and 7 due to browser compatibility issue. Still, I think it's better than nothing ;)


    Neil