Date picker Calendar Web - visual adjust

Hello I would like some help to fix this visual problem: date picker calendar web is overlapping buttons, I would like buttons to only appear below calendar

Preview in web

Thanks in advance

Hi! Please use the new date field component instead of the old date picker calendar for web.

1 Like

Hello, Mevi

Thanks for your anwser.

I used new date field, but my problem persist when i tap “choose date”:

You should go and adjust the z position to greater that 0
then it should work


Thanks! Its worked. :slight_smile:

Do you know if there is a pick time component for web app ?

you could use a dropdown list

Yes, it s what im doing.

Thanks for your help!

@Mevi @Dimos_Vamvourellis Hi again, this new date field component doesnt work when you access your web app from mobile browser like chrome.

Is this behavior expected?

1 Like

Hi! Please clarify what you mean with “doesn’t work” with screenshots etc. so I can help :slight_smile:

The new “Date Field” component works fine on Mobile Preview but not in Web preview.

When I clic the component in web preview nothing happens… I don’t know if I am missing some configuration…

Can you help me ??

Component Market id: custom-1fbdd72b-2714-45b9-9d5f-4824eff41e4a

When you click on that component nothing happens, just blink but dont open the calendar.

It works fine when i access from a PC’s Google Chrome.

1 Like

Have you set the z-index to be greater than 0 as instructed above? Otherwise the calendar will remain under everything you have below the date field. Unfortunately the z-index has to be set manually at the moment, we are looking to fix it so that it would be set by default as well.

Also if the date field is inside container(s), but the Container is not large enough to accommodate the calendar pop-up, set it to not clip overflowing content from under Layout.

1 Like

Thanks!!! It worked!

@Mevi if the date field is inside a container, it looks like we also need to manually increase the z-index of the container, else any components added below (outside) the container will also obscured the calendar popup. This can become quite a headache if we have a mix of multiple date fields in the page.

If there a bug tracker opened to address this already? If not, I can help submit one.

We’re trying to figure out internally how to handle z-indexes better in a way that would make sense, since the current situation is not ideal, but haven’t figured out anything yet. This will be a new feature once we do have a solution for it.