HTML Date Picker - Entry Box Formatting (Mobile) | XM Community
Question

HTML Date Picker - Entry Box Formatting (Mobile)

  • 12 February 2024
  • 2 replies
  • 38 views

Userlevel 6
Badge +5

Hi Everyone

Hope you’re well.

The yellow box is a HTML date picker, but on mobile the box is not full length like on desktop.

Mobile

Desktop

How can I make the yellow box full length on both devices?

Thanks :)


2 replies

Userlevel 6
Badge +21

Hi @parkie_0007,

Currently, surveys are designed primarily for desktop compatibility, with automatic resizing for mobile screens. The size of the question box you're seeing on mobile devices is adjusted automatically and cannot be directly changed.

However, here are a couple of suggestions you can try:

  1. Write JavaScript to adjust the box size specifically for mobile screens.
  2. Duplicate the question and add it to the survey twice. Apply display logic to show one version of the question when the device type is desktop and the other version when the device type is mobile. You can then customize the mobile version question using CSS. Please note that when you make adjustments to the mobile version of the question, you're actually doing it within the Desktop view. Therefore, it's essential to increase the size of the text box to ensure that Qualtrics automatically resizes it for mobile devices.

Please let me if this works.

Userlevel 6
Badge +5

Hi @Sachin Nandikol 

Thanks for getting back to me.

Are you able to provide some code I can test?

Thanks :) 

Leave a Reply