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

Flatpickr in a mobile browser (field outlines)


JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • QPN Level 2 ●●
  • 75 replies

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

11 replies

CamM
Level 3 ●●●
Forum|alt.badge.img+20
  • Level 3 ●●●
  • 121 replies
  • August 25, 2022

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


JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • Author
  • QPN Level 2 ●●
  • 75 replies
  • August 25, 2022

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 ?


CamM
Level 3 ●●●
Forum|alt.badge.img+20
  • Level 3 ●●●
  • 121 replies
  • August 25, 2022

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.


JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • Author
  • QPN Level 2 ●●
  • 75 replies
  • August 25, 2022

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


CamM
Level 3 ●●●
Forum|alt.badge.img+20
  • Level 3 ●●●
  • 121 replies
  • August 25, 2022

Hi JR33, certainly can 🙂
Here you go -:


Cheers,
Cameron


CamM
Level 3 ●●●
Forum|alt.badge.img+20
  • Level 3 ●●●
  • 121 replies
  • August 30, 2022

Any luck, JR33?


JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • Author
  • QPN Level 2 ●●
  • 75 replies
  • August 30, 2022

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.


CamM
Level 3 ●●●
Forum|alt.badge.img+20
  • Level 3 ●●●
  • 121 replies
  • August 30, 2022

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


JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • Author
  • QPN Level 2 ●●
  • 75 replies
  • August 31, 2022

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


TomG
Level 8 ●●●●●●●●
Forum|alt.badge.img+27
  • Level 8 ●●●●●●●●
  • 5926 replies
  • August 31, 2022

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


JR33
QPN Level 2 ●●
Forum|alt.badge.img+10
  • Author
  • QPN Level 2 ●●
  • 75 replies
  • August 31, 2022

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