What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by rake879 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 ??

     

     

    Screenshot
  • Profile Image
    JotForm Support

    Answered by david 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

    Answered by rake879 on May 19, 2017 at 01:40 PM

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

  • Profile Image
    JotForm Support

    Answered by david 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.