Skip to content

Documentation

Extensive Documentation for PowerPack & WooPack to help you with common questions and issues.

PowerPack

  1. Home
  2. Docs
  3. PowerPack
  4. Modules
  5. Modal / Popup Box
  6. How to fix the double scrollbar issue?

How to fix the double scrollbar issue?

If you are using Windows PC or you’ve got a persistent scrollbar visible on Mac then you might see double scrollbars in the Modal Box if the modal content is lengthy and beyond the viewport height.

To fix it, simply add the below CSS in your theme or in Customizer:

.pp-modal-container::-webkit-scrollbar {
   display: none;
}
.pp-modal-container {
   -ms-overflow-style: none; 
   scrollbar-width: none; 
}

The Modal Box will remain scrollable but the scrollbar will get hidden.

If you want to make the scrollbar appear inside the Modal Box content then please add the below CSS:

.pp-modal .pp-modal-content {
  max-height: calc(100vh - 80px);
}
body .pp-modal-container .pp-modal {
  margin-top: 0;
  margin-bottom: 0;
}

Was this article helpful to you? Yes No
×