Form collapse issues in hover and active states

  • NursesUSA
    Asked on November 26, 2014 at 6:37 AM

    There are several issues with this form collapse:

    1. On form designer, I cannot access any of the question which are in a  " collapse form"  section.  So I cannot change the css for them.

    2. The form collapse buttons change size in hover and active states, although I did not include this in the css.

    3. The form collapse buttons will not display the "active"  styling when the section is open.

     

  • Charlie
    Replied on November 26, 2014 at 11:12 AM

    Hi,

    I see that you have a lot of CSS styling in your end. This is causing a lot of conflict of some of your styling.

    Here is the edited one that I have: http://form.jotformpro.com/form/43294479350966 

    1. On form designer, I cannot access any of the question which are in a  " collapse form"  section.  So I cannot change the css for them.

    This is because the Collapse field is set to "closed", if you would like to see the content of the collapse field in your form designer you can follow the screenshot below.

    1.1 In Form Designer, the collapse is not showing even when clicked.

    Form collapse issues in hover and active states Image 1 Screenshot 40

    1.2 If you want to show the content under the collapse field, you can open it by change the status under Properties.

    Form collapse issues in hover and active states Image 2 Screenshot 51

    1.3 After that, it will show the content under the collapse field.

    Form collapse issues in hover and active states Image 3 Screenshot 62

     

    2. The form collapse buttons change size in hover and active states, although I did not include this in the css.

    This is because you have conflicting width size on your CSS for classes .form-section and .form-section-closed

    I added this CSS code to correct that:

    .form-section, .form-section-closed {

        max-width : 100%;

        margin-left : auto;

        margin-right : auto;

    }

     

    3. The form collapse buttons will not display the "active"  styling when the section is open.

    Now, I'm having a hard time finding where the problem is, but I believe one of the element is set to have a default background color, regardless if it is the collapse field is active or not.

    I would suggest that you look for the element that conflicts the active state of your collapse field. But I will still try to investigate to where it is conflicting.

    For now, please do see the edited cloned form that I shared above.

    Thank you.