Search code examples
cssresponsive-designmaterializesidebar

After opening modal the sidebar gets "cut". How to make the height of the sidebar responsive?

After opening the modal my sidebar looks like that:

enter image description here

I wonder what can I do about that? Modals are located outside the body tag (cause I blur all the stuff located in div named "blur-container2"). So all things except of modals are located in "blur-container2".

The simplified structure looks like that:

<html>
<body>
<div class="blur-container2"></div>
</body>
//Modals are here//
</html>

My body and html css code: 

body, html {
    height: 100%;
    color: black;
}

The container where the sidebar located in: 

.blur-container2 {
    background-image: url(http://southernhoopsreport.com/wp-content/uploads/2018/11/156689-download-white-gradient-background-2447x1468-1080p.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover!important;
    background-position: center;
    display: block;
    overflow: auto;
    height: 100%!important;
}

Modal css:

.modal {


   border-radius: 17px;
    background-color: rgb(255, 255, 255)!important;
    backdrop-filter: blur(15px);
    color: rgb(0, 0, 0);
        overflow-y: auto;
    width: 55%;
    max-height: 70%;
    margin: auto;
    padding: 0;
    border-radius: 2px;
    background-color: #fafafa;
    will-change: top,opacity;
}

Model overlay:

.modal, .modal-overlay {
    position: fixed;
    left: 0;
    display: none;
    right: 0;
}
Solution

  • Yes, it seems to be wrong to have modals outside the body but I found the solution. My problem was that the div "blue-container2" inside of which one I had all the other stuff had this css value: display: block.

    So that's what was causing this problem with cutting sidebar. When I deleted that - sidebar became "responsive".