how to position date picker in front of select box

Author Posts

jamesburden November 16, 2022 at 10:54 am

Hi Sebastian – hope you can help with this. I’ve got a page here: https://gcf.community/meet/brazil23/ where I have a registration form. If you scroll down to the ‘Travel Information’ section and click on the date picker field ‘Date departing the accommodation’ then the pop up date picker appears behind the Passport Country select box field below. I’ve tried adjusting this with z-index but with no success.

Here’s a screenshot: screenshot of issue

How do I solve this?

Thanks for your help

Sebastian November 16, 2022 at 11:30 am

Hi James,

You were on the right track, you just need a very high z-index. Using Chrome’s browser tools I tried out the following style which positions the date-picker above the select menu.

body .xdsoft_datetimepicker {
    z-index: 99999999;
}

The select menu has the following rule, so you just need to match it (because the date-picker comes after the select menu in the HTML DOM) or optionally add another digit:

.select2-container {
    z-index: 99999999;
}

I hope that helps!

Sebastian

jamesburden November 16, 2022 at 1:51 pm

Thanks so much Sebastian – works perfectly. 🙂

Sebastian November 16, 2022 at 1:52 pm

Great, you’re welcome!

You must login or register to reply to this topic.