angular material md-datepicker inside bootstrap modal

后端 未结 3 1783
别跟我提以往
别跟我提以往 2021-01-17 16:42

I am tring to use Angular material md-datepicker inside a Bootstrap modal but, on clicking the date the modal popup hides. How can i solve that problem?

<
相关标签:
3条回答
  • 2021-01-17 16:42

    I had the same problem, and found that this solution to a similar question actually solved the problem. You just need to add the following style to the HTML code of your modal window:

    <style>
        .md-datepicker-calendar-pane {
            z-index: 1200;
        }
    </style>
    

    The other upvoted answer to the same question says that you can also modify the angular-material.css file and change the z-index there, but I don't recommend modifying the source files because your change may be reverted if you decide to update the library.

    0 讨论(0)
  • 2021-01-17 16:58

    The accepted answer doesn't work for @angular/material 5.0.0-rc0 .

    Instead add in the <your_component>.component.scss file:

    ::ng-deep .cdk-overlay-container{
        z-index: 1200 !important;
    }
    

    ::ng-deep (or /deep/) prefix needs to be used because of the view encapsulation. Note that deep is marked as deprecated in the documentation and using cdk-overlay-container is probably not a good practice since future material module changes might break it.

    0 讨论(0)
  • 2021-01-17 17:05

    The working solution for me with @angular/material 5.2.4 is to add my css file following part.

    .cdk-overlay-container { 
        z-index: 1200; 
    }
    
    0 讨论(0)
提交回复
热议问题