0

Whenever I open a modal from Materializecss, the scrollbar (my body has inline scrollbar) hides everytime. What should I do so that whenever I open a modal, the body's scrollbar will remain? 

<body>
        <div id="modal_confirm_block" class="modal modal_dialog">
            <div class="modal-content white" id="modal_confirm_co_content" style="padding:0px !important;">
                <div id="div_available" class="center-align" style="padding: 20px !important;"> <i class="material-icons md-12 noselect center-align amber-text darken-4" > warning</i><br>
                    <p style="padding:20px !important;" class="center-align"> Are you sure you want to block this guest? </p>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row" style="margin: 0 !important;">
                    <div class="col s6"> <a href="#!" id="btn_confirm_block" class=" cyan darken-2 white-text modal-action waves-effect waves-white btn" style="width:100% !important;">Confirm</a></div>
                    <div class="col s6">    <a href="#!" id="btn_cancel_block" class="blue-grey darken-4 white-text  modal-action modal-close waves-effect waves-white btn" style="width:100% !important; ">Cancel</a></div>
                </div>
            </div>
        </div>
    </body>

Screenshot before opening a modal
Screenshot when a modal opens. Look at the scrollbar it was removed. And I don't like that because the screen always move.

John Benedict Pulumbarit
  • 1
  • 2
  • 1
    maybe we could help if you post a working snippet – Mhd Alaa Alhaj Dec 10 '17 at 11:02
  • @MhdAlaaAlhaj I added 2 screenshots. One displaying the scrollbar before opening the modal, then the second one, the scrollbar always disappear when the modal opens. – John Benedict Pulumbarit Dec 10 '17 at 21:33
  • These links may help you: [Link1](https://stackoverflow.com/questions/25070144/bootstrap-modal-removes-scroll-bar),[Link2](https://stackoverflow.com/questions/19288546/how-can-i-prevent-body-scrollbar-and-shifting-when-twitter-bootstrap-modal-dialo) I know that you are using materializecss and these solutions are for bootstrap modal, but I believe that it's the same idea thus, it could help. – Mhd Alaa Alhaj Dec 11 '17 at 05:11

1 Answers1

0

for me, it worked by putting it that way in the css.

body {
   overflow: scroll !important
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
Fragosojp
  • 141
  • 2
  • 8