0

Good morning, I've been racking my brain on this one for a bit. I have a calendar pop up that shows up when you click into a texbox. This calendar works fine, except for the fact that it shows up behind the menu bars.

enter image description here

I've been trying to get it to show on top by using z-index, but I've got no luck. Is there a way to make all javascript show up on top? Any help is greatly appreciated.

Here's the code:

 $(document).ready(function() {
$( "#datepicker" ).datepicker({ minDate: -0, maxDate: "2Y+1M+7D",
            changeMonth: true, changeYear: true,
            numberOfMonths:2,
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            dateFormat:"mm/dd/yy",
            showAnim:"drop" });//fold, slide, blind, bounce, slideDown, show, fadeIn, clip.
  });

There's also a ton of CSS involved that I can't really post here. Thank you in advance :)

salimagic
  • 55
  • 10
  • 1
    have you tried this: http://stackoverflow.com/questions/7033420/jquery-date-picker-z-index-issue, or this: http://stackoverflow.com/questions/22513291/jquery-datepicker-shows-up-behind-other-regular-page-elements – Ben Sewards May 11 '16 at 15:06
  • Thank you! That was it! I don't know why I didn't think of that :) – salimagic May 11 '16 at 15:18

3 Answers3

0

You can try the CSS way:

#datepicker{position:relative;z-index:100;}

Or you can try jQuery way:

$('.ui-datepicker').css('z-index', 99999999999999);

JSFiddle

EliTownsend
  • 181
  • 11
0

I can't tell where the problem lies from the code you shared, but I have had this happening to me before. The problem usually is in the HTML layout. Make sure the date picker is not inside another element that is stuck with a relative position. You may try to move it outside any parent elements.

this wouldn't work

<body> <nav style="position:fixed;"> <!-- insert menu here --> </nav> <div style="position:relative;"> <div id="datepicker"></div> </div> </body>

but this will <body> <nav style="position:fixed;"> <!-- insert menu here --> </nav> <div style="position:relative;"> </div> <div id="datepicker"></div> </body>

Sorry if this doesn't help. I'm just going with a hunch based on what had happened to me before.

Running Buffalo
  • 1,243
  • 2
  • 9
  • 17
0

Ben Sewards gave me the solution with his link. I just needed to add some CSS to the actual texbox. Thank you everyone.

salimagic
  • 55
  • 10