Problema de índice z do seletor de data Jquery


106

Eu tenho um div de apresentação de slides e um campo selecionador de data acima desse div.

Quando clico no campo do selecionador de data, o painel do selecionador de data aparece atrás do div da apresentação de slides.

E eu coloquei o script como:

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

Portanto, não posso alterar o Z-index do datepicker no CSS. O z-index do selecionador de data que o script está gerando é 1 e meu div da apresentação de slides (também chamando através de googleajaxapi) z-index é 5. Então, acho que tenho que aumentar o z-index do selecionador de data para mais de 5. Então, alguma maneira de aumentá-lo?

Alguém pode me ajudar?


Respostas:


176

Coloque o seguinte estilo no elemento de texto 'input': position: relative; z-index: 100000;.

O div datepicker obtém o z-index da entrada, mas isso funciona apenas se a posição for relativa.

Usando desta forma, você não precisa modificar nenhum javascript do jQuery UI.


8
O problema com isso é que sua entrada será exibida acima de outros elementos, raramente é o efeito desejado
Serj Sagan

1
Isso deveria funcionar quando o selecionador de data está limitado a um intervalo ?
rmoestl

10
position : relativenão é aceitável e não funciona na minha situação. a solução abaixo funciona bem.
Kiwy

1
isso não está funcionando no navegador IE 11. Este navegador é específico?
Ashwini Maddala

3
Esta solução, embora funcione, não é válida para todas as situações. O melhor é substituir com uma única linha de CSS '.ui-datepicker {z-index: 9999! Important;}'
Daniel Tung

154

simplesmente em seu css use ' .ui-datepicker{ z-index: 9999 !important;}' Aqui 9999 pode ser substituído por qualquer valor de camada que você deseja que seu selecionador de data esteja disponível. Nenhum código deve ser comentado, nem a adição de ' position:relative;' css aos elementos de entrada. Porque o aumento do índice z dos elementos de entrada afetará todos os botões de tipo de entrada, o que pode não ser necessário em alguns casos.


Tive que usar em datepickervez deui-datepicker
M Smith

JavaScript ainda usa Z-indexes descontínuos, contextos de empilhamento arbitrários e tem problemas de compatibilidade entre navegadores em 2016? ActionScript 3 FTW (uma década atrás e ainda hoje).
Triynko,


14

Com base na resposta do marksyzm, funcionou para mim:

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

1
Mas isso afeta apenas a entrada e não a sobreposição do selecionador de data?
marksyzm

2
Estou usando este exemplo jqueryui.com/datepicker , que não usa um ícone para o selecionador de data. Com esta solução não tive problemas com o resto dos componentes web.
Lucas

5

Acrescentando à resposta de Justin, se você está preocupado com a marcação desordenada ou não quer este valor codificado em CSS, você pode definir a entrada antes que seja mostrado. Algo assim:

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

Observe que você não pode omitir a "position": "relative"regra, já que o plug-in ou parece no estilo embutido para ambas as regras ou a folha de estilo, mas não para ambos .

O dialog("widget")é o selecionador de data real que aparece.


1
Esse problema deve ser tratado nos scripts JqueryUI e definido para evitar sobreposições por padrão. A maioria dos casos de uso nunca iria querer nenhuma entrada sobrepondo os recursos de entrada do calendário. Se houver necessidade de que a entrada (ou outros elementos) se sobreponham ao calendário, uma solução como essa deve ser usada. Dito isto, @marksyzm seria a melhor solução IMO já que você a aplicaria somente quando necessário.
FrankO

5

Eu tive esse problema que resolvi usando no clique:

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

Esta solução funciona perfeitamente em janela pop-up para mim. Obrigado !
darkomen

5

Tenho uma caixa de diálogo que usa o selecionador de data. Sempre esteve escondido. Quando ajustei o Z-index, o campo no formulário inferior sempre apareceu na caixa de diálogo.

Usei uma combinação de soluções que vi para resolver o 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  } ); }                    
            });

A exibição anterior garante que o selecionador de data esteja sempre no topo quando selecionado, mas o onClose garante que o índice z do campo seja redefinido para que não se sobreponha em quaisquer caixas de diálogo abertas posteriormente com um selecionador de data diferente.


Essa solução é ótima e resolveu meu problema. Mas edite um pouco na parte "onClose". Eu coloquei em $(this)vez de $('.ui-datepicker'). Portanto, ele será definido z-index:0como "esta entrada" em vez de todas as entradas com a classe ui-datepicker.
Asuka165


1

Eu tenho uma página onde o selecionador de data estava no topo de um botão tabletools datatables.net. Os botões de tabelas de dados tinham um índice z maior do que os botões de data individuais do selecionador de data. Graças à resposta de Ronye, ​​consegui resolver esse problema usando posição: relativa; e Z-index: 10000. Obrigado!


1

Isso aconteceu comigo quando estava faltando o tema. Certifique-se de que o tema existe ou talvez recarregue o tema e carregue-o novamente no servidor.


1

Foi isso que resolveu meu problema:

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

1

Na verdade, você pode adicionar efetivamente em seu css, .ui-datepicker{ z-index: 9999 !important;}mas pode modificar jquery-ui.cssou jquery-ui.min.csse adicionar no final da classe ui-datepicker z-index: 9999 !important;. ambas as coisas funcionam para mim (você só precisa de um ;-))


0

Eu também tive esse problema, já que o selecionador de data usa o z-index da entrada, adicionei o seguinte css

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

Basta seguir a regra que se aplica ao seu, por id pai, classe ou, no meu caso, uma caixa de diálogo de bootstrap, usando seu grupo de entrada e controle de formulário.


0

Eu precisei

.datepicker.dropdown-menu {
    position: relative;
    z-index: 9999 !important;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.