Opened 7 years ago

Closed 7 years ago

#14249 closed bug (notabug)

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:


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

Change History (1)

comment:1 Changed 7 years ago by Scott González

Resolution: notabug
Status: newclosed

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.

Note: See TracTickets for help on using tickets.