Flatpickr in a mobile browser (field outlines) | XM Community
Skip to main content

Hi there,
I just create a field with Flatpickr and I realise, when I use my iPhone to check all that, than the fields outlines disepears. To get them back, I have to set the option disableMobile to false.
But it is not what I want. I want a native mobile experience with a calendar.
How can I fixe that please ?
Thanks

Hi JR33, any chance you can provide a screenshot or two to explain what you're seeing?

Of course CamM 😉
Here is a screenshot when disableMobile is set to true :
IMG_3485.jpgAll is ok, you can see the field... But when I set to false...
IMG_3486.jpgThe field is still here, you can click on it and choose a date but no outlines anymore 😂
Is there a way to fix that please ?

Strange... I can't seem to replicate the behaviour you're seeing. Are you sure you don't have any CSS that might be impacting on the text input field?
For reference, my testing was with the following JavaScript added to the addOnLoad section -:
jQuery("#"+this.questionId+" .InputText").flatpickr({
enableTime: "false",
altInput: "true",
altFormat: "F j, Y",
dateFormat: "Y-m-d",
disableMobile: "false",
});
If I set 

disableMobile: "true"
, then the only change in behaviour on iPhone is that it no longer uses the native iPhone date selector and instead reflects the styling applied to my survey.

I think the problem is in the header... Can you show me what you have put in your Look&Feel please ?

Hi JR33, certainly can 🙂
Here you go -:


Cheers,
Cameron

Any luck, JR33?

I'm afraid not.
The first time, I implementated the "airbnb" css theme and now I always getting this theme even if I'm not calling it in the jquery... (+ deleted to the header).
I think my mysterious issue come from that... Otherwise I exactly put the same code than you posted above.

Hi JR33,
Sorry to hear it’s still not working for you.
It might be worth going back to basics (assuming you haven’t already done so) by creating a dummy survey with just the flatpickr question and no special css theming to see whether you encounter the problem? If it doesn’t present, then you can gradually add in your theme customisations until you discover the culprit.
Cheers,
Cameron

That's what I tried to do and it's always the same problem. I really dont know why... Maybe the problem is on my iPhone settings...
Can you check with yours please ? https://teresamonroesandbox.ca1.qualtrics.com/jfe/form/SV_9EwCOkxU31iFbr8

Add this CSS rule:
.InputText.flatpickr-input.flatpickr-mobile {border-color:#000;height:1.5em;}

https://community.qualtrics.com/XMcommunity/discussion/comment/48961#Comment_48961Thank you TomG, as you can see in the link above the field is not hidden anymore : ))

Leave a Reply


Terms & Conditions