Search code examples
javascriptjquerycssjquery-pluginsjquery-ui-layout

jQuery UI layout plug-in OVERFLOW setting

jsFiddle is provided for better illustration. In this case I am using two plugins: jQuery UI layout plugin & Trent datetime picker plugin.

The pop-up datetime picker will be blocked by the west pane resize bar. If I set option west__showOverflowOnHover: true, the scroll bar won't work. I am follow the overflow setting instruction here, but still not get it through yet.

Or maybe there is a conflict between these two plugins?

Solution

  • Your problem is the z-index, in this file jquery-ui.css search for the class .ui-datepicker and add the property like this:

    .ui-datepicker {
   width: 17em;
   padding: .2em .2em 0;
   z-index: 100 !important;
}

    For the moment I overwrite the class, you can check it here

    Hope it helps!