In the second line make the Weather AM box the same height and rounded corner design

  • tommichaud007
    Asked on April 22, 2025 at 4:21 PM
    In the second line, make the "Weather AM" box the same height and design (rounded corners) as the "Dinner Cover" and "% Labor" Box.
  • Jan JotForm Support
    Replied on April 22, 2025 at 7:43 PM

    Hi Thomas,

    Before adding the custom CSS code to the form, you can check my cloned test form and see if that works for you.

    If yes, add the custom CSS code I shared at the bottom of my reply to adjust the height and the radius of the Dropdown field. Here's how to add it to your form:

    1. In Form Builder, click the Form Designer icon.
    2. In the second line make the Weather AM box the same height and rounded corner design Image 1 Screenshot 30
    3. Go to the Styles tab.
    4. Paste the custom CSS code here.
    5. In the second line make the Weather AM box the same height and rounded corner design Image 2 Screenshot 41

    Here's the custom CSS code you need to add to your form to adjust the border radius and height of the dropdown menu:

    /* Dropdown border - 26407021*/
    select#input_6 {
        border-radius: 5px !important;
        height: 30px !important;
    }
    li[data-type="control_dropdown"] > div.form-input-wide:before {
        background-color: transparent !important;
    }
    li[data-type="control_dropdown"] > div.form-input-wide:after {
       display: none !important;
    }
    /* Code ends here - 26407021 */

    Give it a try and let us know if you need any help.

  • tommichaud007
    Replied on April 23, 2025 at 4:13 AM

    Jan:

    Worked great!!

    Thanks

    Tom

Your Answer