Change size of CRED datepicker input field

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to adjust the width of a datepicker input field in a Form, but the CSS I'm using does not seem to work.

Solution:
Datepicker fields are more complex than other text-based input fields, and you'll probably have to override multiple other styles. The max-width attribute is one of those styles. For example:

input[name="wpcf-fieldslug[display-only]"].hasDatepicker{
  max-width:200px;
}

Use the browser's development tools to inspect the field and determine which overrides are necessary.

Relevant Documentation:
https://css-tricks.com/debugging-tips-tricks/
http://bigemployee.com/4-simple-techniques-to-quickly-debug-and-fix-your-css-code-in-almost-any-browser/
https://benfrain.com/debugging-css/

This support ticket is created 5 years, 1 month ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 2 replies, has 2 voices.

Last updated by martinE-4 5 years, 1 month ago.

Assisted by: Christian Cox.

Author

Posts

October 12, 2019 at 3:33 am #1360705

martinE-4

I am trying to:

change size of CRED input date field "wpcf-date-published" with:

/* how to change the field length */
input[name="wpcf-date-published"]{
width:200px;
}

Link to a page where the issue can be seen:

sorry local
I expected to see:

works fine with other non-date fields I have

Instead, I got:

in both Safari and Chrome the date field expands to width of the column in the form (it is the second field in a row with two columns) then shrinks to what seems to be a default size.

I'm guessing this is a minor bug. I got around it by changing the WordPress date format to a more concise format that fits in the default date field size provided on the Cred form. But if you can reproduce this I would be happy to know it wasn't just me!

October 13, 2019 at 4:30 pm #1360923

Christian Cox

Datepicker fields are a bit different and you'll probably have to override some other styles...max-width for one. Try this:

input[name="wpcf-date-published[display-only]"].hasDatepicker{
max-width:200px;
}

If it doesn't work I would have to see it in the browser to make a better recommendation.

October 14, 2019 at 3:15 am #1361031

martinE-4

My issue is resolved now. Thank you!