Adjusting Date Picker Field Width in JotForm

In the form above, how do I change the width of the Date Picker widget?

Hello tommichaud007,

Thanks for reaching out to us for help. I understand the issue. Let me look into it and get back to you with a solution.

We really appreciate your patience and understanding while we’re looking into this.

Hi tommichaud007,

You can change the width in the field properties. Let me show you how:

1. In the Form Builder, select the form element’s Gear icon to open properties.
2. In the properties panel, go to General at the top.
3. Scroll down to the bottom to the Width field
4. Insert your desired width.

Elson:

Watch what happens if you "shrink" the field.

Thanks

Tom

Hi Tom,

When you shrink the Date Picker field in JotForm, it aligns side by side with other shrunk fields, allowing for a more compact layout. However, shrinking the field doesn't actually reduce the width of the Date Picker input itself it primarily changes its positioning within the form. As a result, the calendar may still appear wide, and the spacing might look unbalanced or inconsistent with the rest of the form’s design.

To actually change the width you need to inject CSS code into the form. Let me show you:

1. In Form Builder, click on the roller-paint icon (Form Designer) located in the upper right corner
2. Click on the Styles tab
3. In the Inject Custom CSS section, insert/paste the code below and click on Save

li[data-type="control_datetime"] {

width: 400px !important;

}

Give it a try and let us know how it goes.

Will this change the width of all Date Pickers on the form?

Hi Tom,

Yes, injecting the CSS code as shown will change the width of all Date Picker fields on the form, not just one specific Date Picker. This is because the CSS targets the Date Picker field type globally within the form using the selector li[data-type="control_datetime"]. Checkout my screencast below:

If you want to customize the width of only a specific Date Picker field, you would need to target that field individually with a more specific CSS selector, such as using the field's unique ID or class. Otherwise, the code affects every Date Picker on the form uniformly.

Let us know if you have any other questions.