CSS for Collapsed field help

  • Profile Image
    Mrkay
    Asked on November 15, 2013 at 06:14 AM

    I've been using some CSS on my form (Mainly copy and pasting from other forms as I am a CSS novice) but there are a few things I can't do. Could you please assist.

     

    How can I remove the white bounding box from around the collapsed field?

    Can I reduce the height of the collapsed field and ensure the collapsed arrow moves with the current text?

    Can I decrease the space between the Postcode box and the Manual Address Entry collapsed field so it is similar to the distance the rest of the fields are at?

    I'd also like to match the font and font size of the other fields? If we can adjust the size of the collapsed arrow icon as well.

     

    Thanks

  • Profile Image
    jonathan
    Answered on November 15, 2013 at 07:39 AM

    Hi,

    Please try adding this CSS codes to existing on your form 

     

    #collapse_25{border:none;

    margin-top: -10px;

    height:30px !important;

    font-size:8px;

    padding-bottom:40px;

    }

     

    I tried this on a test form http://form.jotform.me/form/33183517860456? check if this works for you.

    Inform us if you need help.

    Thanks.

  • Profile Image
    Mrkay
    Answered on November 15, 2013 at 07:43 AM

    Thanks that seems to work, however I think I may have some conflicting CSS now. Could you take a look for me?

    And also can the Submit button be moved higher up now?

     

    This is my complete CSS at the moment:

     

    .form-collapse-table{background:none #3A3935 !important;}

    .form-collapse-table{height:40px !important;} // Reduce the height of the collapse field.form-section-closed {height:40px !important;} // Reduce the height of the collapse while closed#collapse-text_25 {margin-top:6px;} // To bring the text in the middle.form-collapse-table{text-shadow:none;}.form-collapse-table {background-image:none;background-color:black;border-color: #3A3935;}.form-collapse-mid {text-shadow:none;}.form-collapse-table:hover {box-shadow:none;text-shadow:none;background: #114CDF;}a {color: #FE0000}.form-line {padding-left: 20px;}.form-all {padding-top: 0;}.form-html {max-width: 530px;width: 530px;margin-left: 40px;}

    #collapse_25{border:none;margin-top: -10px;height:30px !important;font-size:8px;padding-bottom:40px;}

  • Profile Image
    jonathan
    Answered on November 15, 2013 at 08:59 AM

    Hi,

    I have reduced the injected CSS in my test form

    to this

     

    .form-collapse-table{background:none #3A3935 !important;}

    // To bring the text in the middle

    .form-collapse-table{text-shadow:none;}

    .form-collapse-table {background-image:none;background-color:black;border-color: #3A3935;}

    .form-collapse-mid {text-shadow:none;}

    .form-collapse-table:hover {box-shadow:none;text-shadow:none;background: #114CDF;}a {color: #FE0000}

    .form-line {padding-left: 20px;}

    .form-all {padding-top: 0;}

    .form-html {max-width: 530px;width: 530px;margin-left: 40px;}

    .form-collapse-mid {

    margin: 10px 45px 10px 20px;

    }

     

    Tell us if this works for you already. 

    Don't hesitate to inform if there is more we can help you with.

     

    Thanks.

  • Profile Image
    jonathan
    Answered on November 15, 2013 at 08:59 AM

    Sorry, this was the test form http://form.jotform.me/form/33183517860456?

    Thanks.