I am encountering an issue with my bootstrap modal that includes a jquery datepicker.
Specifically, the datepicker is styled as follows:
.datepicker{ z-index:1000;}
Interestingly, it functions perfectly on Google Chrome, displaying like this:
However, on Internet Explorer 10 and Firefox, it appears differently:
Below is the HTML for the modal in question:
<div name="fechaAprobacionModal<?php echo $i; ?>" id="fechaAprobacionModal<?php echo $i; ?>" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 id="myModalLabel">Indicar Aprobación de Facturas de Programas Especiales </h4>
</div>
<div class="modal-body">
<p> <div class="texto_importante" style="margin-top:4px;"> Fecha Aprobación: </div>
<div class="input-prepend">
<span class="add-on"><i class="icon-calendar"></i></span>
<input type="text" id="fechaid<?php echo $i; ?>" value="<?php echo date('Y-m-d') ?>"/>
</div>
</p>
</div>
<div class="modal-footer">
<button class="btn btn-small" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button class="btn btn-small btn-info" id="guardar<?php echo $i; ?>">Guardar</button>
</div>
</div>
Can anyone provide guidance on how to resolve this issue?