How to make the Date Picker, with time field enabled, smaller?

I want the Date Picker field to shrink so I can put it in a column rather than take up the whole page. I was able to do this with this form: https://www.jotform.com/build/212245312429145

However with the new form I am creating, it is greyed out. I need to use date and time just like this form

https://www.jotform.com/build/212245312429145

Hi thecrusher24,

Thanks for reaching out to Jotform Support. The Shrink option is not available on multi-field elements due to the theme you're using. As a workaround to this, we can use a few CSS codes to shrink the field. Let me show you how to do that:

1. In Form Builder, click on the Paint Roller icon on the right.
2. Under the Styles tab, paste the following codes to the CSS box.

/* shrink date picker - 16124901*/

#id_42 {

  width: calc(50% - 8px) !important;

}

/* Ends here */

Feel free to test this cloned demo form or clone it to your account to inspect it further. We also have a guide on How to Inject Custom CSS Codes that you can check out.

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

It shrunk in a little bit but it still takes up 2/3rds of the line. Please look at this form. I need the date picker to be just like it.

https://www.jotform.com/build/212245312429145

Hi thecrusher24,

To make it smaller, just reduce the value on the CSS code like so:

/* shrink date picker - 16124901*/

#id_42 {

 width: calc(35% - 8px) !important;

}

/* Ends here */

Before:

After:

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

Didn't change it much.

Hi thecrusher24,

You're working on the New Form DQS form, right? When I checked it, the codes that was shared has not been applied yet. Please try it again by following the steps I shared previously. If that's not the form you're referring to, please send us the form link again.

Let us know if you need any help.

Correct. It starting to look like a mess in there with all the different CSS. Please advise what needs to be removed and what needs to be inserted. I changed the code to 35% but it didn't change the size.

Hi thecrusher24,

There is no need to remove other CSS codes, the codes I shared only needs to be copied at the end of the CSS box. Please check out the new screencast below I made demonstrating this:

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

Done. You can close this ticket.