Date picker Calendar Web - visual adjust

Winteam_ltda · February 16, 2022, 3:37pm

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

Mevi · February 21, 2022, 10:41am

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

Winteam_ltda · February 22, 2022, 10:30am

Hello, Mevi

Thanks for your anwser.

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

Dimos_Vamvourellis · February 22, 2022, 12:59pm

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

then it should work

Winteam_ltda · February 23, 2022, 12:28pm

Thanks! Its worked.

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

Dimos_Vamvourellis · February 23, 2022, 4:50pm

you could use a dropdown list

Winteam_ltda · February 23, 2022, 4:52pm

Yes, it s what im doing.

Thanks for your help!

Winteam_ltda · February 25, 2022, 5:39pm

@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?

Mevi · March 7, 2022, 7:53am

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

Serge_Angeloz1 · March 7, 2022, 7:03pm

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

Winteam_ltda · March 8, 2022, 10:59am

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.

Mevi · March 16, 2022, 9:22am

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.

Winteam_ltda · March 17, 2022, 12:14pm

Thanks!!! It worked!

TK_Soh · May 21, 2022, 4:03am

@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.

Mevi · June 16, 2022, 10:54am

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.