Modal problem

Asked

Viewed 93 times

0

I’m with trying to use the modal of bootstrap to change the information of table names, but when I call the modal happens what is appearing in the image, it gets superimposed behind.

Problema com o MODAL

I’m using the https://getmdl.io of Google as the main theme, and I have identified that what causes this is the class mdl-layout__content, when I remove it it does not happen this problem, but the layout of the page does not look as it should.

How can I fix this?

html css
  • 1

    Have you tried changing his z-index?

  • 1

    This class "mdl-layout_content" has a z-index set as :1, you have to put your modal in a z-index greater than 1 and it may solve. This may depend on the context of the positions also.... but put everything that is modal code last in your document and put z-index:10; for example to test

  • I’m doing some tests with the tips that have passed, I’ll let you know if I made it. vlw

  • 1

    The problem was exactly his z-index, I removed z-index: 1 from the "mdl-layout_content" class and the problem was solved. ?

  • 1

    @Marcosraialvesdacunha was worth the force that good that worked there!

1 answer

1


Marcos consulting the Template official on the site you realize that the class mdl-layout__content has a z-index set as :1, as you can see on the link https://getmdl.io/templates/dashboard/index.html

These are the default values of the class .mdl-layout__content see comment on 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;
}

So you need to work on this z-index or the z-index of the modal to bring it forward.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.