Calendar view partially hidden

[Michael Lindholm]

Have a look at: http://imgur.com/pzcp1ah

As you can see the popover calendar is partially hidden by the top menu. Is it possible to have the calendar below instead of above using custom CSS?

Best regards,
Michael

[Geoff]

Hey Michael and welcome to the forums!

Yes, it appears that the z-index (the CSS property that controls layering) for the datepicker is lower than that the header of the theme’s menu is. Try adding something like this to your style.css file or using the Simple Custom CSS plugin:

.datepicker {
z-index: 100 !important;
}

Once you do that, you may also notice that the top of the datepicker is slightly off the screen. You can use this CSS to fix that as well:

.datepicker.dropdown-menu {
top: 0 !important;
}

Will that work for you? Please let me know.

Cheers!
Geoff

[Michael Lindholm]

Hey Geoff,

Thanks it works, sort of… The top part is still slightly off screen even after applying:

.datepicker.dropdown-menu {
top: 0 !important;
}

I know that I can adjust top even further but then the text Events From is no longer visible. I wonder if it is possible to modify the CSS so that the date picker is shown below instead of on top? This is actually done automatically on smaller screens (see attached image) but I can’t seem to identify the CSS in charge of changing from top to bottom position. Perhaps you can help?

Best regards,
Michael

[Geoff]

Hey Michael,

Shoot, sorry that didn’t completely do the trick. I think that adjusting the CSS further is the best way to go, though you could probably tweak it a bit further with some Javascript to change the tooltip location dynamically. I’m afraid we’re fairly limited in how much we can support customizations like this, but hopefully the CSS route will make it much more palatable than the way it was before.

Thanks,
Geoff

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts