1

Note : I looked in to other similar questions but solutions there didn't help my cause.

In a webpage I have a datepicker and dialog box. My datepicker is getting generated but not coming in front, which I suspect is due to z-index. Hence I changed the css of datepicker to 

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 9999 !important;

This applies the z-index(as shown in image below) but still I'm not getting to datepicker in front !! ??

enter image description here

advaita
  • 87
  • 1
  • 13
  • 1
    Did you try setting `position` style to the dialogbox? Similar to how described here: http://stackoverflow.com/questions/5480639/how-to-make-div-appear-in-front-of-another – mk117 Aug 26 '14 at 10:29
  • Both seem to play nicely with each other: http://jsfiddle.net/salman/8n9yzkx7/ – Salman A Aug 26 '14 at 10:55
  • @SalmanA my datepicker is within parent page not in the dialog box as understood by you I suppose – advaita Aug 26 '14 at 11:27
  • @mk117 thnx. issue is definitely related to position... – advaita Aug 26 '14 at 11:28

1 Answers1

2

Try setting z-index like this

    $("#elem").datepicker({
        dateFormat: "yy-mm-dd",
        beforeShow:function(){
            $(this).css({
                "position": "relative",
                "z-index": 999999
            });
        },              
        onClose:function(){
            $(this).css({
                "z-index": 1
            });
        }               
    });
lonewolf217
  • 611
  • 4
  • 10
  • this property of position gets overridden with .ui-helper-hidden-accessible { position: absolute; } – advaita Aug 26 '14 at 12:28
  • with position:relative the datepicker is coming but at the bottom while with position:absolute the datepicker is coming as shown in image above. – advaita Aug 26 '14 at 12:33
  • so, is this solved or are you still having issues ? I was not able to determine based on your previous comment – lonewolf217 Aug 26 '14 at 17:09
  • no it's not resolved, at first I thought it is related to position and if I make it 'relative' it would work out. But after making it 'relative' datepicker comes at the bottom of the page(which is not correct), and with 'absolute' position, datepicker goes behind the page hence not visible. – advaita Aug 27 '14 at 03:32