How to scroll the page when a modal dialog is longer than the screen

Question

I have a modal dialog in my app which can get quite long in the y direction  This introduces a problem whereby some of the content of the dialog is hidden off the bottom of the page     I would like the window scrollbar to scroll the dialog when it is displayed and too long to fit on the screen but leave the main body in place behind the modal  If you use Trello then you know what I m going for   Is this possible without using JavaScript to control the scrollbar   Here is the CSS I have applied to my modal and dialog so far   body blocked     overflow  hidden      modal-screen     background   717174    position  fixed    overflow  hidden    width  100     height  100     top  0    left  0    opacity  0 9    z-index  50      dialog     background   fff    position  fixed    padding  12px    top  20     left  50     z-index  10000    border-radius  5px    box-shadow  0  0  8px   111

User · Answer

I wanted to add my pure CSS answer to this problem of modals with dynamic width and height. The following code also works with the following requirements:

Place modal in center of screen
If modal is higher than viewport, scroll dimmer (not modal content)

HTML:

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS/LESS:

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

This way the modal is always within the viewport. The width and height of the modal are as flexible as you like. I removed my close icon from this for simplicity.

User · Answer

This is what fixed it for me   max-height  100   overflow-y  auto    EDIT  I now use the same method currently used on Twitter where the modal acts sort of like a separate page on top of the current content and the content behind the modal does not move as you scroll   In essence it is this   var scrollBarWidth   window innerWidth - document body offsetWidth     body   css     marginRight  scrollBarWidth    overflow   hidden       modal show      With this CSS on the modal   position  fixed  top  0  left  0  width  100   height  100   overflow  auto    JSFiddle  https   jsfiddle net 0x0049 koodkcng  Pure JS version  IE9    https   jsfiddle net 0x0049 koodkcng 1   This works no matter the height or width of the page or modal dialog  allows scrolling no matter where your mouse finger is  doesn t have the jarring jump some solutions have that disable scroll on the main content  and looks great too

User · Answer

position fixed implies that  well  the modal window will remain fixed relative to the viewpoint  I agree with your assessment that it s appropriate in this scenario  with that in mind why don y you add a scrollbar to the modal window itself   If so  correct max-height and overflow properties should do the trick

User · Answer

Here   Works perfectly for me   modal-body        max-height 500px       overflow-y auto

User · Answer

In the end I had had to make changes to the content of the page behind the modal screen to ensure that it never got long enough to scroll the page   Once I did that  the problems I encountered when applying position  absolute to the dialog were resolved as the user could no longer scroll down the page

User · Answer

fixed positioning alone should have fixed that problem but another good workaround  to avoid this issue is to place your modal divs or elements at the bottom of the page not within your sites layout  Most modal plugins give their modal positioning absolute to allow the user keep main page scrolling    lt html gt           lt body gt           lt  -- Put all your page layouts and elements            lt  -- Let the last element be the modal elemment  -- gt           lt div id  myModals  gt                       lt  div gt            lt  body gt   lt  html gt

User · Answer

Window Page Scrollbar clickable when Modal is open  This one works for me  Pure CSS    lt style type  text css  gt   body modal-open   padding-right  17px  important      modal-backdrop in   margin-right  16px     lt  style gt    Try it and let me know

User · Answer

simple way you can do this by adding this css So  you just added this to CSS    modal-body   position  relative  padding  20px  height  200px  overflow-y  scroll      and it s working

User · Answer

just use    modal-body       max-height  calc 100vh - 210px       overflow-y  auto      it will arrange your modal and then give it an vertical scroll

User · Answer

Here is my demo of modal window that auto-resize to its content and starts scrolling when it does not fit the window   Modal window demo  see comments in the HTML source code   All done only with HTML and CSS - no JS required to display and resize the modal window  but you still need it to display the window of course - in new version you don t need JS at all    Update  more demos     Modal window aligned to top Centered Modal window Old demo that use Javascript   The point is to have outer and inner DIVs where the outer one defines the fixed position and the inner creates the scrolling   In the demo there are actually more DIVs to make them look like an actual modal window             modal               position  fixed              transform  translate 0 0               width  auto  left  0  right  0              height  auto  top  0  bottom  0              z-index  990     display above everything else                padding  20px     create padding for inner window - page under modal window will be still visible                        modal  outer               box-sizing  border-box  -moz-box-sizing  border-box  -webkit-box-sizing  border-box  -o-box-sizing  border-box              width  100               height  100               position  relative              z-index  999                      modal  inner               box-sizing  border-box  -moz-box-sizing  border-box  -webkit-box-sizing  border-box  -o-box-sizing  border-box              width  100               height  auto           allow to fit content  if smaller                    max-height  100            but make sure it does not overflow browser window                    allow vertical scrolling if required                overflow-x  hidden              overflow-y  auto                  definition of modal window layout                background   ffffff              border  2px solid  222222              border-radius  16px     some nice  modern  round corners                padding  16px           make sure inner elements does not overflow round corners

User · Answer

Change position  position fixed  overflow  hidden    to  position absolute  overflow scroll

[css] How to scroll the page when a modal dialog is longer than the screen?

Examples related to css

Examples related to scroll