Datepicker z-index issue

  • bigfish7

    (@bigfish7)


    10 years ago

    I am using datepicker on the homepage of a website (https://forumsouthflorida.com)

    I am also using revolution slider on the homepage and for some reason the datepicker is showing up behind the slider. I’ve messed around with the z-index of both elements and it doesn’t seem to fix the issue. I’m hoping that somebody can take a look and tell me what I’m missing.

    Thank you so much!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Jim Thornton

    (@mintegrate)

    increase your z-index for this selector:
    ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all

    and you can make the width for this selector 270px so its not so big <div id=”ui-datepicker-div” class=”ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all”>

    Jim Thornton

    (@mintegrate)

    so thats:

    div#ui-datepicker-div.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all {
   z-index: 99;
   width: 270px;
}
    Thread Starter bigfish7

    (@bigfish7)

    Thank you so much for your reply! I noticed that this would fix the issue, however I have no idea where that selector is located. Do you know what file I need to edit?

    Thanks again!

    Jim Thornton

    (@mintegrate)

    You can add that at the bottom of your site’s style.css file. It’s just a more direct way of declaring the selector in the context of its div id and div class.

    Datepicker.js has it’s own default css but you don’t want to change that. If it doesn’t override the datepicker css, you can use the select in your style.css “#ui-datepicker-div”

    Thread Starter bigfish7

    (@bigfish7)

    That was super helpful, unfortunately it didn’t resolve the issue. The datepicker is still going behind the slider. I went into the js-composer.css file and added z-index:100; to line 2074 and it brings the datepicker up front but it messes up the slider by causing the text on the slider to disappear immediately once it’s loaded.

    Hopefully this all makes sense. Thank you again for your help!

    Jim Thornton

    (@mintegrate)

    I added that and checked it in the console. And I can see it working on your site.

    Regarding your text disappearing, it looks like you tried to change the z-index of slider related divs. It’s unrelated from what I can see.

    You can add the following to the bottom of your stylesheet:

    .tp-simpleresponsive .caption, .tp-simpleresponsive .tp-caption {
z-index: 9999 !important; }

    that fixed it when I tested it.

    Thread Starter bigfish7

    (@bigfish7)

    That fixed it! I really appreciate your help!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Datepicker z-index issue’ is closed to new replies.