How do I reduce the height of the Form Collapse header

  • Profile Image
    steelneil81
    Asked on November 23, 2011 at 10:55 AM

    I am looking to reduce the height of the form collapse header. I have tried using 

    .form-collapse-table{height:0px;}

    but this reduces it from the bottom up and doesn't stay central to the middle.

     

    I would also like to change the colour of this header background.

  • Profile Image
    abajan
    Answered on November 23, 2011 at 01:38 PM

    Please replace all of your current injected CSS with the following and afterwards let us know if the form collapse headers look right:

    .form-line{
    padding:0;
    }

    .form-collapse-table,
    .form-collapse-mid,
    .form-collapse-right,
    .form-collapse-right-hide {
    height:40px;
    }

    #collapse-text_1,
    #collapse-text_5,
    #collapse-text_6,
    #collapse-text_3,
    #collapse-text_4 {
    margin-top:9px;
    }

  • Profile Image
    abajan
    Answered on November 23, 2011 at 01:50 PM

    Regarding the background of the said element, please see the following threads:

    How is it possible to change the color of the Expand/Collapse bar?
    Can I edit styles in the form?

    If you require further information on manipulation of the form collapse style, do let us know.

  • Profile Image
    abajan
    Answered on November 23, 2011 at 02:26 PM

    After looking at your form again, I realized that the CSS needed altering even more. Please add the following rules to what I told you to inject above:

    .form-section-closed {
    height:40px !important;
    }

    #id_7,
    #id_8,
    #id_9,
    #id_10,
    #id_11 {
    margin-top:-20px;
    }

  • Profile Image
    steelneil81
    Answered on November 23, 2011 at 02:55 PM

    Brilliant! Thanks for your help

  • Profile Image
    abajan
    Answered on November 23, 2011 at 08:35 PM

    You're quite welcome :)