how to position date picker in front of select box

This topic contains 3 replies, has 2 voices, and was last updated by  Sebastian 1 week, 3 days ago.

Author Posts

jamesburden

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

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

Thanks so much Sebastian – works perfectly. 🙂


Sebastian

Great, you’re welcome!

You must login or register to reply to this topic.