Modal windows are not scrollable

[sferik]

I'm trying to display the "Terms of Service" for a website in a Bootstrap modal box. The length of the Terms stretch the container to be larger than the size of the viewport. At this point, I'd expect the modal box to become scrollable, but instead, it hides the overflown content. Since it's easier to show than to tell, I've attached a screenshot that demonstrates the issue. Let me know if there's any additional information I can provide to help debug. Here's the full code for the project: https://github.com/codeforamerica/adopt-a-hydrant/tree/bootstrap

[mohnish]

Try to use a max-height for the modal window and set the overflow to auto. That should help you as a work around.

[sferik]

Thanks for the incredibly quick reply! ✨❤️✨ That workaround solves the problem, but IMHO this should be the default behavior in Bootstrap. I'll work on a patch that implements this in the default stylesheet.

[mihnutzen]

u can add a new attribute data-static="true" in the HTML

in JS add (inside show function)

var position_static = that.$element.data('static') || false

position_static ?
that.$element
.addClass('static')
.css('top', $(window).scrollTop()) :

css:

.modal.static {
position: absolute;
margin-top: 80px;
}

this way you can scroll the page and have a modal bigger then the window