Height of the drop down not matching with the parent element(Height of the row )

  • Profile Image
    rake879
    Asked on May 19, 2017 at 09:58 AM

    I used drop down in the table and the height of the drop down doesn't match with the height of the row. Can i control the height of the drop down ??

     

     

  • Profile Image
    david
    Answered on May 19, 2017 at 11:49 AM

    You can control the height of dropdown fields with the following CSS:

    .form-dropdown {
        height : 20px;
    }

    The height of the tables cells can be adjusted with the following CSS:

    .form-matrix-values {
        height : 20px;
    }

    And the width/height of the cells for the labels can be adjusted with the following CSS:

    .form-matrix-row-headers {
        width : 20%;   
    }

    If you add all of the above, the form would look like this:

    https://form.jotformpro.com/71384220352953

  • Profile Image
    rake879
    Answered on May 19, 2017 at 01:40 PM

    Thanks for the answer . i tried doing this but it didn't work . 

  • Profile Image
    david
    Answered on May 19, 2017 at 02:31 PM

    If you want them all to be the same height, you would need the row header text not to wrap.  Increase the width of the row header until the full text fits on one row.  You can set increase the percentage in the following code:

    .form-matrix-row-headers {
        width : 20%;  
    }

    Or set a specific value:

    .form-matrix-row-headers {
        width : 100px;  
    }

    Increase the value until the header fits on a single line.