jQuery, how to change the z-index of datepicker

1

When I make a $('#man_dia').datepicker(); the tag with id = 'man_day' is just an input, and jQuery inserts the other elements in the DOM alone, I even get the id that jQuery generates

#ui-datepicker-div { z-index: 999; }

Because stilo assumes what's in the tag, which it generates like this:

<div class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" id="ui-datepicker-div" style="position: absolute; top: 132px; left: 707.7px; display: block; z-index: 1;">

What I've tried to do is like this:

$('#man_dia').datepicker(function(){
    $(this).css('z-index','999'); // nao resolveu
});
///////////////////////////////////////////////
$('#man_dia').datepicker(); // criar calendário primeiro
$('#man_dia').css('z-index','999'); // passar o css depois também nao resolveu
//////////////////////////////////////
$('#man_dia').datepicker();            
$('#ui-datepicker-div').css('z-index','999'); // passar o ID que o jQuery gera não resolveu
    
asked by anonymous 07.08.2015 / 15:10

1 answer

1

Use! important in the z-index of the desired element. So it ignores if there is another value previously defined.

#ui-datepicker { 
    z-index:999 !important; 
}
    
08.08.2015 / 16:39