CODEWITHSUNDEEP
css
Seong Choi
Seong Choi

Reputation: 31

How to hide modal scroll bar

I want to set the modal class to be height 750px even if the screen shrink. I was able to set content1 to overflow in the modal but .modal takes the whole screen.

https://stackoverflow.com/posts/65815926/edit#
.content1 {
  overflow-y:auto; 
}
<div class="modal">
  <div>
    <div>
      <div class="content1">
      </div>
      <div class="content2">
      </div>
    </div>
  </div>
</div>

I have a modal that I want to set height 750px in this modal but when I open the chrome dev tool it will create a scroll bar on the right side. I tried overflow: hidden but this won't let me scroll the popup. Thank you

Upvotes: 0

Views: 995

Answers (1)

TNF
TNF

Reputation: 209

Assuming you're using Bootstrap, you can always try:

.modal-open .modal {
margin-right: -10px;
margin-left: -10px;
}

A tad bit hacky but it will visually hide the scrollbar, still enabling the ability to scroll.

Updated answer:

You can try hiding the scrollbars with CSS:

.modal-open .modal::-webkit-scrollbar {
  display: none;
}

.modal-open .modal {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

Upvotes: 2

Related Questions