0

Estou com tentando utilizar o modal do bootstrap para alterar as informações dos nomes da tabela, mas quando chamo o modal acontece o que está aparecendo na imagem, ele fica sobreposto atrás.

Problema com o MODAL

Estou utilizando o https://getmdl.io do Google como tema principal, e já identifiquei que o que causa isso é a class mdl-layout__content, quando removo ela não acontece esse problema, mas o layout da pagina não fica como deveria.

Como posso resolver isso?

5
  • 1
    Já tentou alterar o z-index dele? 4/07/2018 às 12:15
  • 1
    Essa classe "mdl-layout__content" tem um z-index setado como :1, vc tem que colocar o seu modal em um z-index maior que 1 e pode ser que resolva. Isso pode depender do contexto dos positions tb.... mas coloque tudo que for código de modal por último no seu documento e coloque o z-index:10; por exemplo pra testar
    – hugocsl
    4/07/2018 às 12:19
  • Estou realizando alguns testes com as dicas que passaram, já informo se consegui. vlw 4/07/2018 às 12:30
  • 1
    O problema era exatamente o z-index dele, eu removi o z-index: 1 da classe "mdl-layout__content" e o problema foi resolvido. Poderia colocar ele como resposta para que eu possa dar como resolvido? 4/07/2018 às 12:57
  • 1
    @MarcosRaiAlvesdaCunha valeu a força que bom que deu certo ai!
    – hugocsl
    4/07/2018 às 13:13

1 Resposta 1

1

Marcos consultando o Template oficial no site vc percebe que a classe mdl-layout__content tem um z-index setado como :1, como vc pode ver no link https://getmdl.io/templates/dashboard/index.html

Esse são os valores default da classe .mdl-layout__content veja o comentário no z-index.

.mdl-layout__content {
    -ms-flex: 0 1 auto;
    position: relative;
    display: inline-block;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    z-index: 1; /* vc precisa alterar esse z-index ou colocar um z-index maior que 1 no modal*/
    -webkit-overflow-scrolling: touch;
}

Então vc precisa trabalhar esse z-index ou o z-index do modal para traze-lo para frente.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .