Home/ Questions/Q 7187461
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:51:01+00:00

I am using this picker for my projects and I need to change the

  • 0

I am using this picker for my projects and I need to change the z index value of the picker, since its popping up behind a modal window, I want to increase the z index of the datetimepicker. I have currently added the zIndex propert inside the definition of the datetimepicker like this

jQuery(function() {
                       jQuery( "#from_date" ).datetimepicker({ dateFormat: 'yy-mm-dd',
                           showOn: "button",
                           zIndex:9999,
                            buttonImage: "/gra/images/icons/fugue/calendar-month.png",
                           buttonImageOnly: true });
               });

which is higher than the z index of the popup dialog inside which the datepicker button is placed but its not coming on top.
Which other places in the css style do I need to set the z index value apart from the definition?

Update: I used Firebug and found out the cause, but not the solution. The dialog box z-index is 1001, which I know as I have set that in the css. But the date-picker z-index value is 91 and I tried to search the class ui-datepicker-div but cannot find any class which has z-index value of 91 right now, there was a #search class with zindex as 91, and I changed it to 9999 (thinking thats the one its inheriting from), but it still again shows the value 91 in firebug..??
The classes associated wit the datepicker html component are

<div id="" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" ... z-index=91....>
<html for date picker>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here is the big problem with zIndices.

    <div style='position:relative'id="global-container">
    <div style='position:relative;z-index:1'id="container-1">
        <div style='position:relative;z-index:50'id="content-1"> content 1 </div>
    </div>
    <div style='position:relative;z-index:2'id="container-2">
        <div style='position:relative;z-index:2'id="content-2"> content 2 </div>
    </div>
</div>

    You may assume that #content-2 will appear below #content-1 but the problem is that z-indices are compared within their relative containers. So the z-indices taken into count are #container-1 and #container-2. I would suggest a layer just for popups. Something with an incredibly high z-index that is within the global container. No matter what then it will override.

    Now in ie7, as far as i can tell, its just whoever has highest z-index, but in modern browsers it depends on the entire chain, hence ui layer is needed for popups.

    Youtube iframes will just dominate any z-index popups, at least i cannot figure out how to get around that… yet.

    • 0