PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Set z-index on datepicker

  1. ciznerguy
    Member

    I can't seem to figure out how to set the z-index for the date picker that pops up when the field is clicked. The date picker is popping up behind some content and I need it to have a z-index of something like 999. Thanks

    Posted 8 years ago on Tuesday July 31, 2012 | Permalink
  2. Please provide a link to your site and we can help you with the exact CSS. However, the z-index can be set in your theme's style.css. Possibly something like this, untested though, for you your form:

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

    or

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

    Or, you can push your content back to allow the date picker to be on top.

    Posted 8 years ago on Tuesday July 31, 2012 | Permalink
  3. ciznerguy
    Member

    Thanks. here's a link to the form. http://www.dubaishippinghelp.com/test/ Your have to wait 15 seconds. I'm trying to embed it in a pop-up. I tried both codes and neither worked. Any insight on this? THanks.

    Posted 8 years ago on Tuesday July 31, 2012 | Permalink
  4. I have no direct experience with this in a modal window (popup) but I did see a lot of discussion about that online too. Apparently, the datepicker is technically a popup, and you want to put it in a popup. I'm sure there is a conflict with the z-index there somewhere. Depending on the version of the datepicker UI, it looks like they have changed the z-index multiple times.

    I've seen online that the modal has a z-index of 1001, the dialog 1002, which means you need to give the datepicker something 1003 or higher.

    EDIT: In your installation, it's even higher. Check this:

    .visiblebox Z-index=999999

    You have your datepicker like this:

    div #ui-datepicker-div Z-index=9999

    It needs to be higher than 999999, or you need to dial that number down to something less than your datepicker.

    Posted 8 years ago on Tuesday July 31, 2012 | Permalink
  5. ciznerguy
    Member

    I tried making this div '#ui-datepicker-div Z-index=9999999'
    and still no result.

    I've also tried messing with the popup's z-index to no avail.

    Posted 8 years ago on Wednesday August 1, 2012 | Permalink
  6. I just went to check again to see what the z-indexes were, but the form does not come up now, just the site, with no form on that page when I checked.

    Nevermind: It finally came up.

    I believe this is the issue: the z-index of the date picker and the modal window you're using. Do you have anyone nearby who can help you with the JavaScript? Do you have any alternatives, like using the date drop down instead of the date picker, or not using the modal, or a different modal?

    Another edit: I was able to add this CSS:

    [css]
    .visiblebox {
    z-index: 100!important;
    }

    And the datepicker comes up on top of the modal as desired. See this screenshot: http://minus.com/mj4Sbf1j9/

    If you can sort out the z-indexes, this will work fine.

    Posted 8 years ago on Wednesday August 1, 2012 | Permalink