Problema del índice z del selector de fechas de jquery


106

Tengo un div de presentación de diapositivas y un campo de selector de fecha encima de ese div.

Cuando hago clic en el campo selector de fecha, el panel selector de fecha se muestra detrás de la presentación de diapositivas div.

Y he puesto el guión como:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js

Entonces no puedo cambiar el índice z de datepicker en CSS. El índice z de datepicker que genera el script es 1 y mi div de presentación de diapositivas (también llamando a través de googleajaxapi) z-index es 5. Así que supongo que tengo que aumentar el índice z del selector de fecha mayor que 5. alguna forma de aumentarlo?

¿Puede ayudarme alguien?


Respuestas:


176

Ponga el siguiente estilo en el elemento de texto 'de entrada': position: relative; z-index: 100000;.

El div del selector de fechas toma el índice z de la entrada, pero esto solo funciona si la posición es relativa.

De esta manera, no tiene que modificar ningún javascript de la interfaz de usuario de jQuery.


8
El problema con esto es que su entrada se mostrará por encima de otros elementos, este rara vez es el efecto deseado
Serj Sagan

1
¿Se supone que eso funciona cuando el selector de fechas está vinculado a un lapso ?
rmoestl

10
position : relativeno es aceptable y no funciona en mi situación. la solución de abajo funciona bien.
Kiwy

1
esto no funciona en el navegador IE 11. ¿Este navegador es específico?
Ashwini Maddala

3
Esta solución, aunque funciona, no es válida para todas las situaciones. Lo mejor es anular con una sola línea de CSS '.ui-datepicker {z-index: 9999! Important;}'
Daniel Tung

154

simplemente en su uso de CSS ' .ui-datepicker{ z-index: 9999 !important;}' Aquí 9999 se puede reemplazar por cualquier valor de capa que desee que su selector de fechas esté disponible. No se debe comentar ningún código ni agregar ' position:relative;' css en los elementos de entrada. Porque aumentar el índice Z de los elementos de entrada tendrá efecto en todos los botones de tipo de entrada, lo que puede no ser necesario en algunos casos.


Tuve que usar en datepickerlugar deui-datepicker
M Smith

¿JavaScript todavía usa índices z discontinuos, contextos de apilamiento arbitrarios y tiene problemas de compatibilidad entre navegadores en 2016? ActionScript 3 FTW (hace una década y todavía hoy).
Triynko


14

Basado en la respuesta de marksyzm, esto funcionó para mí:

$('input').datepicker({
    beforeShow:function(input) {
        $(input).css({
            "position": "relative",
            "z-index": 999999
        });
    }
});

1
¿Pero esto solo afecta la entrada y no la superposición del selector de fechas?
marksyzm

2
Estoy usando este ejemplo jqueryui.com/datepicker que no usa un icono para el selector de fechas . Con esta solución no tuve problemas con el resto de componentes web.
Lucas

5

Agregando a la respuesta de Justin, si le preocupa el marcado desordenado o no desea que este valor esté codificado en CSS, puede configurar la entrada antes de que se muestre. Algo como esto:

$('input').datepicker({
    beforeShow:function(input){
        $(input).dialog("widget").css({
            "position": "relative",
            "z-index": 20
        });
    }
});

Tenga en cuenta que no puede omitir la "position": "relative"regla, ya que el complemento se ve en el estilo en línea para ambas reglas o la hoja de estilo, pero no para ambas .

El dialog("widget")es el selector de fechas real que aparece.


1
Este problema debe abordarse en los scripts de JqueryUI y configurarse para evitar superposiciones de forma predeterminada. La mayoría de los casos de uso nunca querrían que ninguna entrada se superpusiera a las capacidades de entrada del calendario. Si es necesario que la entrada (u otros elementos) se superpongan al calendario, entonces se debe utilizar una solución como esta. Habiendo dicho eso, @marksyzm sería la mejor solución en mi opinión, ya que la aplicaría solo cuando sea necesario.
FrankO

5

Tuve este problema que resolví usando al hacer clic:

var checkin = $('.dpd1').datepicker()
.on('click', function (ev) {
        $('.datepicker').css("z-index", "999999999");
}).data('datepicker');

Esta solución funciona perfectamente en la ventana emergente para mí. Gracias !
darkomen

5

Tengo un cuadro de diálogo que usa el selector de fecha. Siempre estuvo oculto. Cuando ajusté el índice z, el campo del formulario inferior siempre aparecía en el cuadro de diálogo.

Usé una combinación de soluciones que vi para resolver el problema.

$('.ui-datepicker', $form).datepicker({
                showButtonPanel: true,
                changeMonth: true,
                changeYear: true,
                dateFormat: "yy-M-dd",
                beforeShow: function (input) {
                    $(input).css({
                        "position": "relative",
                        "z-index": 999999
                    });
                },
                onClose: function () { $('.ui-datepicker').css({ 'z-index': 0  } ); }                    
            });

El espectáculo anterior asegura que el selector de fechas siempre esté en la parte superior cuando se selecciona, pero onClose asegura que el índice Z del campo se restablezca para que no se superponga en ningún cuadro de diálogo abierto más tarde con un selector de fechas diferente.


Esta solución es genial y resolvió mi problema. Pero edítelo un poco en la parte "onClose". Puse en $(this)lugar de $('.ui-datepicker'). Entonces, se establecerá z-index:0en "esta entrada" en lugar de todas las entradas con la clase ui-datepicker.
Asuka165


1

Tengo una página donde el selector de fechas estaba encima de un botón de herramientas de tabla de datatables.net. Los botones de tablas de datos tenían un índice Z más alto que los botones de fecha individuales del selector de fechas. Gracias a la respuesta de Ronye, ​​pude resolver este problema usando position: related; e índice z: 10000. ¡Gracias!


1

Esto me pasó cuando me faltaba el tema. Asegúrese de que el tema exista, o tal vez vuelva a descargar el tema y vuelva a cargarlo en su servidor.


1

Eso fue lo que resolvió mi problema:

 $( document ).ready(function() {   
    $('#datepickerid').datepicker({
     zIndexOffset: 1040 #or any number you want
     });
});

1

De hecho, puede agregar efectivamente en su css .ui-datepicker{ z-index: 9999 !important;}pero puede modificar jquery-ui.csso jquery-ui.min.cssy agregar al final de la clase ui-datepicker z-index: 9999 !important;. ambas cosas funcionan para mí (solo necesitas una ;-))


0

También tuve este problema, ya que el selector de fechas usa el índice z de la entrada, agregué el siguiente CSS

#dialogID input,.modal-dialog input, .modal-dialog .input-group .form-control{
  z-index:inherit;
}

Simplemente tome la regla que se aplica a la suya, ya sea por identificación principal, clase o, en mi caso, un cuadro de diálogo de arranque, usando su grupo de entrada y control de formulario.


0

Tuve que

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.