Make the field the same height and rounded corner design as the other field

As to the form referenced above:

• In the top line, make the "AM Manager Preparer" box the same height and design (rounded corners) as the "Date" and "AM Manager Preparer Email" Box.
• How do I resize the width of a "Dropdown" field?
• In the second line, make the "Weather AM" box the same height and design (rounded corners) as the "Dinner Cover" and "% Labor" Box.
• Format the "% Labor" field as a %
• Center the contents of the "Dinner Cover" and the % Labor" fields.
• In the "Sales" section, make the "Total Sales" the same size and design as the other fields in this section. Format the "Total Sales" fields with a comma to separate thousands as the other fields in this section.
• Why do i need a horizontal scroll bar to read the descriptions in the "Notable Sales" input table. Please change it so the field width is fixed and will show the entire description.

Thanks

Tom

Hi Tom,

Thanks for reaching out to Jotform Support. I understand what you’d like to do, but I’ll need a bit of time to work out a solution. I’ll get back to you shortly.

As to the other questions, to avoid confusion, I moved it to new threads. You can check out the list below:

• How do I resize the width of a Dropdown field
• In the second line, make the Weather AM box the same height and rounded corner design
• Format the Labor field similar to the next field
• Center the contents of the Dinner Cover and the Labor fields
• Make the Total Sales field the same size and design as the other fields
• Why do I need a horizontal scroll bar to read the descriptions in the Notable Sale input table

Hi Tom,

For the top Dropdown element, to have the same height, and rounded corner like the other fields, add the following CSS codes in your form:

1. First, copy this code:

/* Make Dropdown field rounded corner ticket# 26402891 */

.form-all,

.form-dropdown {

    box-shadow: none !important;

    border-radius: 5px !important;

}

.form-dropdown:first-child {

    height: 30px !important;

}

li[data-type="control_dropdown"]>div.form-input-wide::before {

    width: 34px;

    height: 20px;

    content: "";

    display: inline-block;

    top: 1px !important;

    right: 3px;

    background-color: #fff;

    border-radius: 0 40px 40px 0;

    position: absolute;

    pointer-events: none;

    cursor: pointer;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

You can check out the results on my test form here. Give it a try and let us know if you need any more help.