CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapz-index
Francisco Ochoa
Francisco Ochoa

Reputation: 1558

z-index on firefox - internet explorer is not working. Bootstrap modal

I have a bootstrap modal with jquery datepicker.

The datepicker has this style:

.datepicker{ z-index:1000;}

Works fine on google chrome, and it looks like this:

enter image description here

In internet explorer 10 / firefox looks like this

enter image description here

This is the modal html:

<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&oacute;n de Facturas de Programas Especiales </h4>
  </div>
  <div class="modal-body">

            <p> <div class="texto_importante" style="margin-top:4px;"> Fecha Aprobaci&oacute;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>

Any hint on how to solve this?

Upvotes: 0

Views: 2049

Answers (2)

Francisco Ochoa
Francisco Ochoa

Reputation: 1558

I did the following:

<div class="input-prepend" style="z-index:4000;">

    <span class="add-on"><i class="icon-calendar"></i></span>
    <input style="z-index:2000;"  type="text" name="fecha_culminacion" id="fechaid<?php echo $i; ?>" value="<?php echo date('Y-m-d') ?>"/>

</div>

I gave the parent element a higher z-index.

And I found the solution here: internet explorer z-index bug

Upvotes: 1

Sander Koedood
Sander Koedood

Reputation: 6337

For a z-index to work properly in all browsers, it requires it's position to be set to fixed, absolute or relative.

.datepicker{ z-index:1000; position: relative; }

Reference: w3schools

Upvotes: 0

Related Questions