New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modal windows are not scrollable #849

Closed
sferik opened this Issue Dec 26, 2011 · 3 comments

Comments

Projects
None yet
4 participants
@sferik
Contributor

sferik commented Dec 26, 2011

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

Screenshot

@mohnish

This comment has been minimized.

Show comment
Hide comment
@mohnish

mohnish Dec 26, 2011

Contributor

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

Contributor

mohnish commented Dec 26, 2011

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

This comment has been minimized.

Show comment
Hide comment
@sferik

sferik Dec 26, 2011

Contributor

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.

Contributor

sferik commented Dec 26, 2011

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

This comment has been minimized.

Show comment
Hide comment
@mihnutzen

mihnutzen Apr 16, 2013

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

mihnutzen commented Apr 16, 2013

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment