Pro Forms Date Picker on Mobile

Bug Reports
1

Hi!
I have a small issue usign Pro Forms Date Picker.
You can see it on home page at: https://voejetsbra.com.br/ We
are using ProForms to request quotes. All the fields are ok with Placeholder inside the field.

But in mobile device, the field “Date/Data” ins’t with Placeholder
Desktop view are ok. I don’t know if is a Safari bug, or if I can do something to fix.

Thanks for now.

2

Hey! Just tried on my iPhone with Chrome and Safari as well. The plpaceholders are shown for every field. Could you try to clear the caches?

3

Hellooo, i had the same problem on a other project. It did not work on iphone (14 pro max).

signal-2023-11-09-092105_002
signal-2023-11-09-092105_002945×2048 176 KB

4

signal-2023-11-09-092352_002
signal-2023-11-09-092352_0021289×1636 157 KB

So i made this alternative… but it would be cool if the normal placeholder work

5

Just came across this issue, this seems to be an issue between browsers and flatpickr. Something about flatpickr swapping the input on mobile, to provide the native calendar which is more user friendly on mobile devices. There are a few issues about this in their repo → Placeholder does not show for time input on iPhone/iOS Safari · Issue #1103 · flatpickr/flatpickr · GitHub

Solution that worked for me was to add a class to the field, in my case date_field and then add the follwing css to the form:

%root% .date_field {
  position: relative;
  margin-top: 10px;
}

%root% .date_field input:after {
  color: var(--secondary);
  content: attr(placeholder) !important;
  position: absolute;
  left: 8px;
  bottom: 30px;
}

%root% .date_field input[value]:not([value=""]) + input:after {
  content: '' !important;
}

You’ll have to undo the margin-top as soon as you’ve set your fields to appear next to each other instead of stacked. Haven’t fully tested just yet but so far it seems to work just fine when testing in Chrome on Android, Safari on iPad and Chrome WIndows.

1 Like
6

Same problem here.

You can check this URL: Contatti – Velona's Jungle Luxury Suites

Tried on iPhone with Safari and Firefox

EDIT: I temporarily solved it as suggested by @manc (thank you!), but would be nice if could work normally

Thanks for your work!