#14249 closed bug (notabug)

Opened August 21, 2015 02:04PM UTC

Closed August 21, 2015 03:48PM UTC

Datepicker have too lower z-index value inserted as inline style

Reported by: networksolution Owned by:
Priority: minor Milestone: none
Component: ui.datepicker Version: 1.11.3
Keywords: Cc:
Blocked by: Blocking:
Description

Datepicker have a z-index value too lower (now 21), and even worse, it is inserted as inline style.

This make Datepicker incompatible with many popular plugins like Visual Composer.

See for example this site: http://www.agriturismovillanova.it/contatti.html made with Contact Form 7 and Visual Composer. I enabled the CF7 jQuery UI-based fallback for date fields and the calendar was not showing at all because of its z-index: 21.

I had to override the inline style with this code:

.ui-datepicker[style] { z-index: 999 !important; }

So, please choose an higher z-index value and possibly remove the inline style, or explain in documentation how to override it, because the majority of developers may not know the [style] syntax I've used.

Attachments (0)
Change History (1)

Changed August 21, 2015 03:48PM UTC by scottgonzalez comment:1

resolution: → notabug
status: new → closed

The z-index of the datepicker is based on the z-index of it's nearest stacked ancestor. So the text field itself or one of its parents must have a z-index of 20. Increase the value if you need to.