How to scroll the page when a modal dialog is longer than the screen?
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;
}
css scroll
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
add a comment |
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;
}
css scroll
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
try overflow:auto or overflow:scroll in the dialog...
– lakshmi priya
May 7 '12 at 4:32
add a comment |
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;
}
css scroll
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
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;
}
css scroll
css scroll
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
edited Dec 20 '15 at 13:12
cimmanon
54.3k10122145
54.3k10122145
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
asked May 7 '12 at 4:26
David TuiteDavid Tuite
11.4k1881156
11.4k1881156
try overflow:auto or overflow:scroll in the dialog...
– lakshmi priya
May 7 '12 at 4:32
add a comment |
try overflow:auto or overflow:scroll in the dialog...
– lakshmi priya
May 7 '12 at 4:32
try overflow:auto or overflow:scroll in the dialog...
– lakshmi priya
May 7 '12 at 4:32
try overflow:auto or overflow:scroll in the dialog...
– lakshmi priya
May 7 '12 at 4:32
add a comment |
11 Answers
11
active
oldest
votes
just use
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
it will arrange your modal and then give it an vertical scroll
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
3
This is just magic! Thank you
– Nicwenda
Mar 30 '16 at 12:43
6
This should be the accepted answer. Elegant and simple.
– brianfit
May 19 '16 at 13:16
2
why do we have to use 210px? Is there any particular reason behind it?
– ShellZero
Jul 18 '16 at 22:13
7
@ShellZero, it's sum of: modal header, modal footer, top and bottom space between modal and window borders.
– Stalinko
Sep 1 '16 at 11:54
3
Is there solution without hardcoding footer and header height?
– Pavel
Jul 25 '17 at 15:14
|
show 3 more comments
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.
answered Dec 5 '13 at 7:05
0x00490x0049
44156
add a comment |
Change position
position:fixed;
overflow: hidden;
to
position:absolute;
overflow:scroll;
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
1
Doesn't work I'm afraid. It's like the window doesn't realise that the dialog has height.
– David Tuite
May 7 '12 at 4:35
The problem isposition: fixed;Could it be change into absolute or else?
– bitoshi.n
May 7 '12 at 4:42
2
If I do that I run into another problem. If the user is already scrolled way down the page when they open the dialog, it will appear at the very top of the page, out of shot of the current window.
– David Tuite
May 7 '12 at 4:44
1
This worked for me - both in normal modals and when I had a modal in a modal (which Bootstrap says overlapping modals are not supported... it requires custom code).
– eggy
Oct 2 '14 at 23:14
add a comment |
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 */
}
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
Can you lock the page once the popup is open to prevent scrolling? If user has the mouse outside the popup, he will scroll the page instead of popup and once that happens and he moves over popup he will get the popup and the page scrolling. Thanks
– Adyyda
Jan 10 '16 at 16:38
@Adyyda You can stop scrolling by wrapping the page in a DIV withoverflow:hiddenand settings its size to the same as the page and itsmargin-topto negative of itsscroll-top.
– Radek Pech
Jan 11 '16 at 10:28
This was a good and appropriate solution Radek - responsive, cross browser, simply done using CSS. Saved me some time, thanks
– Tremendus Apps
May 17 '16 at 16:33
@RadekPech how is that any different than doinghtml,body{ overflow:hidden }?
– Steven Vachon
Oct 13 '16 at 15:08
@StevenVachon In a page as simple as the demo and a limited number of supported browsers there may not be any difference. But in a more complex page or in a specific browser settinghtml,body{ overflow:hidden }just may not work as expected. So it may look like an overkill but better safe than sorry.
– Radek Pech
Oct 14 '16 at 8:48
add a comment |
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.
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
add a comment |
Here.. Works perfectly for me
.modal-body {
max-height:500px;
overflow-y:auto;
}
edited Oct 27 '16 at 10:03
Smittey
2,24672232
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
add a comment |
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.
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
add a comment |
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!
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
add a comment |
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.
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
14
Doesn't seem like it really fixed the problem..
– user166390
Mar 25 '13 at 21:17
you just have skipped your issue
– Amit Kumar Pawar
Jun 23 '17 at 6:27
both question and answered post by you and you also accept your answer, then why you post question here?
– Thiyagu
Jul 26 '17 at 10:29
2
@Thiyagu that is considered OK. If the questioner finds the solution they themselves should post an answer. They are also free to accept whichever answer helped them. The end goal is to help the community as a whole.
– Bugs
Jul 27 '17 at 8:42
add a comment |
Window Page Scrollbar clickable when Modal is open
This one works for me. Pure CSS.
<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>
Try it and let me know
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
add a comment |
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.
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10476632%2fhow-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
11 Answers
11
active
oldest
votes
11 Answers
11
active
oldest
votes
active
oldest
votes
active
oldest
votes
just use
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
it will arrange your modal and then give it an vertical scroll
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
3
This is just magic! Thank you
– Nicwenda
Mar 30 '16 at 12:43
6
This should be the accepted answer. Elegant and simple.
– brianfit
May 19 '16 at 13:16
2
why do we have to use 210px? Is there any particular reason behind it?
– ShellZero
Jul 18 '16 at 22:13
7
@ShellZero, it's sum of: modal header, modal footer, top and bottom space between modal and window borders.
– Stalinko
Sep 1 '16 at 11:54
3
Is there solution without hardcoding footer and header height?
– Pavel
Jul 25 '17 at 15:14
|
show 3 more comments
just use
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
it will arrange your modal and then give it an vertical scroll
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
3
This is just magic! Thank you
– Nicwenda
Mar 30 '16 at 12:43
6
This should be the accepted answer. Elegant and simple.
– brianfit
May 19 '16 at 13:16
2
why do we have to use 210px? Is there any particular reason behind it?
– ShellZero
Jul 18 '16 at 22:13
7
@ShellZero, it's sum of: modal header, modal footer, top and bottom space between modal and window borders.
– Stalinko
Sep 1 '16 at 11:54
3
Is there solution without hardcoding footer and header height?
– Pavel
Jul 25 '17 at 15:14
|
show 3 more comments
just use
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
it will arrange your modal and then give it an vertical scroll
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
just use
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
it will arrange your modal and then give it an vertical scroll
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
answered Jan 20 '16 at 10:47
Amit Kumar PawarAmit Kumar Pawar
1,73511425
1,73511425
3
This is just magic! Thank you
– Nicwenda
Mar 30 '16 at 12:43
6
This should be the accepted answer. Elegant and simple.
– brianfit
May 19 '16 at 13:16
2
why do we have to use 210px? Is there any particular reason behind it?
– ShellZero
Jul 18 '16 at 22:13
7
@ShellZero, it's sum of: modal header, modal footer, top and bottom space between modal and window borders.
– Stalinko
Sep 1 '16 at 11:54
3
Is there solution without hardcoding footer and header height?
– Pavel
Jul 25 '17 at 15:14
|
show 3 more comments
3
This is just magic! Thank you
– Nicwenda
Mar 30 '16 at 12:43
6
This should be the accepted answer. Elegant and simple.
– brianfit
May 19 '16 at 13:16
2
why do we have to use 210px? Is there any particular reason behind it?
– ShellZero
Jul 18 '16 at 22:13
7
@ShellZero, it's sum of: modal header, modal footer, top and bottom space between modal and window borders.
– Stalinko
Sep 1 '16 at 11:54
3
Is there solution without hardcoding footer and header height?
– Pavel
Jul 25 '17 at 15:14
3
3
This is just magic! Thank you
– Nicwenda
Mar 30 '16 at 12:43
This is just magic! Thank you
– Nicwenda
Mar 30 '16 at 12:43
6
6
This should be the accepted answer. Elegant and simple.
– brianfit
May 19 '16 at 13:16
This should be the accepted answer. Elegant and simple.
– brianfit
May 19 '16 at 13:16
2
2
why do we have to use 210px? Is there any particular reason behind it?
– ShellZero
Jul 18 '16 at 22:13
why do we have to use 210px? Is there any particular reason behind it?
– ShellZero
Jul 18 '16 at 22:13
7
7
@ShellZero, it's sum of: modal header, modal footer, top and bottom space between modal and window borders.
– Stalinko
Sep 1 '16 at 11:54
@ShellZero, it's sum of: modal header, modal footer, top and bottom space between modal and window borders.
– Stalinko
Sep 1 '16 at 11:54
3
3
Is there solution without hardcoding footer and header height?
– Pavel
Jul 25 '17 at 15:14
Is there solution without hardcoding footer and header height?
– Pavel
Jul 25 '17 at 15:14
|
show 3 more comments
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.
answered Dec 5 '13 at 7:05
0x00490x0049
44156
add a comment |
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.
answered Dec 5 '13 at 7:05
0x00490x0049
44156
add a comment |
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.
answered Dec 5 '13 at 7:05
0x00490x0049
44156
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.
answered Dec 5 '13 at 7:05
0x00490x0049
44156
edited Sep 12 '16 at 3:55
answered Dec 5 '13 at 7:05
0x00490x0049
44156
answered Dec 5 '13 at 7:05
0x00490x0049
44156
answered Dec 5 '13 at 7:05
0x00490x0049
44156
44156
add a comment |
add a comment |
Change position
position:fixed;
overflow: hidden;
to
position:absolute;
overflow:scroll;
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
1
Doesn't work I'm afraid. It's like the window doesn't realise that the dialog has height.
– David Tuite
May 7 '12 at 4:35
The problem isposition: fixed;Could it be change into absolute or else?
– bitoshi.n
May 7 '12 at 4:42
2
If I do that I run into another problem. If the user is already scrolled way down the page when they open the dialog, it will appear at the very top of the page, out of shot of the current window.
– David Tuite
May 7 '12 at 4:44
1
This worked for me - both in normal modals and when I had a modal in a modal (which Bootstrap says overlapping modals are not supported... it requires custom code).
– eggy
Oct 2 '14 at 23:14
add a comment |
Change position
position:fixed;
overflow: hidden;
to
position:absolute;
overflow:scroll;
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
1
Doesn't work I'm afraid. It's like the window doesn't realise that the dialog has height.
– David Tuite
May 7 '12 at 4:35
The problem isposition: fixed;Could it be change into absolute or else?
– bitoshi.n
May 7 '12 at 4:42
2
If I do that I run into another problem. If the user is already scrolled way down the page when they open the dialog, it will appear at the very top of the page, out of shot of the current window.
– David Tuite
May 7 '12 at 4:44
1
This worked for me - both in normal modals and when I had a modal in a modal (which Bootstrap says overlapping modals are not supported... it requires custom code).
– eggy
Oct 2 '14 at 23:14
add a comment |
Change position
position:fixed;
overflow: hidden;
to
position:absolute;
overflow:scroll;
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
Change position
position:fixed;
overflow: hidden;
to
position:absolute;
overflow:scroll;
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
edited Mar 13 '16 at 10:49
Mark Rotteveel
61.2k1478121
61.2k1478121
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
answered May 7 '12 at 4:33
bitoshi.nbitoshi.n
1,8501815
1,8501815
1
Doesn't work I'm afraid. It's like the window doesn't realise that the dialog has height.
– David Tuite
May 7 '12 at 4:35
The problem isposition: fixed;Could it be change into absolute or else?
– bitoshi.n
May 7 '12 at 4:42
2
If I do that I run into another problem. If the user is already scrolled way down the page when they open the dialog, it will appear at the very top of the page, out of shot of the current window.
– David Tuite
May 7 '12 at 4:44
1
This worked for me - both in normal modals and when I had a modal in a modal (which Bootstrap says overlapping modals are not supported... it requires custom code).
– eggy
Oct 2 '14 at 23:14
add a comment |
1
Doesn't work I'm afraid. It's like the window doesn't realise that the dialog has height.
– David Tuite
May 7 '12 at 4:35
The problem isposition: fixed;Could it be change into absolute or else?
– bitoshi.n
May 7 '12 at 4:42
2
If I do that I run into another problem. If the user is already scrolled way down the page when they open the dialog, it will appear at the very top of the page, out of shot of the current window.
– David Tuite
May 7 '12 at 4:44
1
This worked for me - both in normal modals and when I had a modal in a modal (which Bootstrap says overlapping modals are not supported... it requires custom code).
– eggy
Oct 2 '14 at 23:14
1
1
Doesn't work I'm afraid. It's like the window doesn't realise that the dialog has height.
– David Tuite
May 7 '12 at 4:35
Doesn't work I'm afraid. It's like the window doesn't realise that the dialog has height.
– David Tuite
May 7 '12 at 4:35
The problem is
position: fixed; Could it be change into absolute or else?– bitoshi.n
May 7 '12 at 4:42
The problem is
position: fixed; Could it be change into absolute or else?– bitoshi.n
May 7 '12 at 4:42
2
2
If I do that I run into another problem. If the user is already scrolled way down the page when they open the dialog, it will appear at the very top of the page, out of shot of the current window.
– David Tuite
May 7 '12 at 4:44
If I do that I run into another problem. If the user is already scrolled way down the page when they open the dialog, it will appear at the very top of the page, out of shot of the current window.
– David Tuite
May 7 '12 at 4:44
1
1
This worked for me - both in normal modals and when I had a modal in a modal (which Bootstrap says overlapping modals are not supported... it requires custom code).
– eggy
Oct 2 '14 at 23:14
This worked for me - both in normal modals and when I had a modal in a modal (which Bootstrap says overlapping modals are not supported... it requires custom code).
– eggy
Oct 2 '14 at 23:14
add a comment |
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 */
}
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
Can you lock the page once the popup is open to prevent scrolling? If user has the mouse outside the popup, he will scroll the page instead of popup and once that happens and he moves over popup he will get the popup and the page scrolling. Thanks
– Adyyda
Jan 10 '16 at 16:38
@Adyyda You can stop scrolling by wrapping the page in a DIV withoverflow:hiddenand settings its size to the same as the page and itsmargin-topto negative of itsscroll-top.
– Radek Pech
Jan 11 '16 at 10:28
This was a good and appropriate solution Radek - responsive, cross browser, simply done using CSS. Saved me some time, thanks
– Tremendus Apps
May 17 '16 at 16:33
@RadekPech how is that any different than doinghtml,body{ overflow:hidden }?
– Steven Vachon
Oct 13 '16 at 15:08
@StevenVachon In a page as simple as the demo and a limited number of supported browsers there may not be any difference. But in a more complex page or in a specific browser settinghtml,body{ overflow:hidden }just may not work as expected. So it may look like an overkill but better safe than sorry.
– Radek Pech
Oct 14 '16 at 8:48
add a comment |
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 */
}
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
Can you lock the page once the popup is open to prevent scrolling? If user has the mouse outside the popup, he will scroll the page instead of popup and once that happens and he moves over popup he will get the popup and the page scrolling. Thanks
– Adyyda
Jan 10 '16 at 16:38
@Adyyda You can stop scrolling by wrapping the page in a DIV withoverflow:hiddenand settings its size to the same as the page and itsmargin-topto negative of itsscroll-top.
– Radek Pech
Jan 11 '16 at 10:28
This was a good and appropriate solution Radek - responsive, cross browser, simply done using CSS. Saved me some time, thanks
– Tremendus Apps
May 17 '16 at 16:33
@RadekPech how is that any different than doinghtml,body{ overflow:hidden }?
– Steven Vachon
Oct 13 '16 at 15:08
@StevenVachon In a page as simple as the demo and a limited number of supported browsers there may not be any difference. But in a more complex page or in a specific browser settinghtml,body{ overflow:hidden }just may not work as expected. So it may look like an overkill but better safe than sorry.
– Radek Pech
Oct 14 '16 at 8:48
add a comment |
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 */
}
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
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 */
}
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
edited Oct 14 '16 at 8:35
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
answered Apr 16 '14 at 14:23
Radek PechRadek Pech
2,19511223
2,19511223
Can you lock the page once the popup is open to prevent scrolling? If user has the mouse outside the popup, he will scroll the page instead of popup and once that happens and he moves over popup he will get the popup and the page scrolling. Thanks
– Adyyda
Jan 10 '16 at 16:38
@Adyyda You can stop scrolling by wrapping the page in a DIV withoverflow:hiddenand settings its size to the same as the page and itsmargin-topto negative of itsscroll-top.
– Radek Pech
Jan 11 '16 at 10:28
This was a good and appropriate solution Radek - responsive, cross browser, simply done using CSS. Saved me some time, thanks
– Tremendus Apps
May 17 '16 at 16:33
@RadekPech how is that any different than doinghtml,body{ overflow:hidden }?
– Steven Vachon
Oct 13 '16 at 15:08
@StevenVachon In a page as simple as the demo and a limited number of supported browsers there may not be any difference. But in a more complex page or in a specific browser settinghtml,body{ overflow:hidden }just may not work as expected. So it may look like an overkill but better safe than sorry.
– Radek Pech
Oct 14 '16 at 8:48
add a comment |
Can you lock the page once the popup is open to prevent scrolling? If user has the mouse outside the popup, he will scroll the page instead of popup and once that happens and he moves over popup he will get the popup and the page scrolling. Thanks
– Adyyda
Jan 10 '16 at 16:38
@Adyyda You can stop scrolling by wrapping the page in a DIV withoverflow:hiddenand settings its size to the same as the page and itsmargin-topto negative of itsscroll-top.
– Radek Pech
Jan 11 '16 at 10:28
This was a good and appropriate solution Radek - responsive, cross browser, simply done using CSS. Saved me some time, thanks
– Tremendus Apps
May 17 '16 at 16:33
@RadekPech how is that any different than doinghtml,body{ overflow:hidden }?
– Steven Vachon
Oct 13 '16 at 15:08
@StevenVachon In a page as simple as the demo and a limited number of supported browsers there may not be any difference. But in a more complex page or in a specific browser settinghtml,body{ overflow:hidden }just may not work as expected. So it may look like an overkill but better safe than sorry.
– Radek Pech
Oct 14 '16 at 8:48
Can you lock the page once the popup is open to prevent scrolling? If user has the mouse outside the popup, he will scroll the page instead of popup and once that happens and he moves over popup he will get the popup and the page scrolling. Thanks
– Adyyda
Jan 10 '16 at 16:38
Can you lock the page once the popup is open to prevent scrolling? If user has the mouse outside the popup, he will scroll the page instead of popup and once that happens and he moves over popup he will get the popup and the page scrolling. Thanks
– Adyyda
Jan 10 '16 at 16:38
@Adyyda You can stop scrolling by wrapping the page in a DIV with
overflow:hidden and settings its size to the same as the page and its margin-top to negative of its scroll-top.– Radek Pech
Jan 11 '16 at 10:28
@Adyyda You can stop scrolling by wrapping the page in a DIV with
overflow:hidden and settings its size to the same as the page and its margin-top to negative of its scroll-top.– Radek Pech
Jan 11 '16 at 10:28
This was a good and appropriate solution Radek - responsive, cross browser, simply done using CSS. Saved me some time, thanks
– Tremendus Apps
May 17 '16 at 16:33
This was a good and appropriate solution Radek - responsive, cross browser, simply done using CSS. Saved me some time, thanks
– Tremendus Apps
May 17 '16 at 16:33
@RadekPech how is that any different than doing
html,body{ overflow:hidden }?– Steven Vachon
Oct 13 '16 at 15:08
@RadekPech how is that any different than doing
html,body{ overflow:hidden }?– Steven Vachon
Oct 13 '16 at 15:08
@StevenVachon In a page as simple as the demo and a limited number of supported browsers there may not be any difference. But in a more complex page or in a specific browser setting
html,body{ overflow:hidden } just may not work as expected. So it may look like an overkill but better safe than sorry.– Radek Pech
Oct 14 '16 at 8:48
@StevenVachon In a page as simple as the demo and a limited number of supported browsers there may not be any difference. But in a more complex page or in a specific browser setting
html,body{ overflow:hidden } just may not work as expected. So it may look like an overkill but better safe than sorry.– Radek Pech
Oct 14 '16 at 8:48
add a comment |
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.
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
add a comment |
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.
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
add a comment |
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.
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
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.
<html>
<body>
<!-- Put all your page layouts and elements
<!-- Let the last element be the modal elemment -->
<div id="myModals">
...
</div>
</body>
</html>
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
edited Nov 17 '13 at 17:35
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
answered Nov 17 '13 at 17:22
Chimdi2000Chimdi2000
331212
331212
add a comment |
add a comment |
Here.. Works perfectly for me
.modal-body {
max-height:500px;
overflow-y:auto;
}
edited Oct 27 '16 at 10:03
Smittey
2,24672232
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
add a comment |
Here.. Works perfectly for me
.modal-body {
max-height:500px;
overflow-y:auto;
}
edited Oct 27 '16 at 10:03
Smittey
2,24672232
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
add a comment |
Here.. Works perfectly for me
.modal-body {
max-height:500px;
overflow-y:auto;
}
edited Oct 27 '16 at 10:03
Smittey
2,24672232
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
Here.. Works perfectly for me
.modal-body {
max-height:500px;
overflow-y:auto;
}
edited Oct 27 '16 at 10:03
Smittey
2,24672232
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
edited Oct 27 '16 at 10:03
Smittey
2,24672232
edited Oct 27 '16 at 10:03
Smittey
2,24672232
edited Oct 27 '16 at 10:03
Smittey
2,24672232
2,24672232
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
answered Oct 27 '16 at 9:53
Evans KwachieEvans Kwachie
211
211
add a comment |
add a comment |
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.
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
add a comment |
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.
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
add a comment |
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.
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
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.
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
answered May 7 '12 at 5:03
o.v.o.v.
19.8k44975
19.8k44975
add a comment |
add a comment |
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!
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
add a comment |
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!
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
add a comment |
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!
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
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!
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
answered Nov 25 '18 at 7:21
Ashiqur RahmanAshiqur Rahman
111
111
add a comment |
add a comment |
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.
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
14
Doesn't seem like it really fixed the problem..
– user166390
Mar 25 '13 at 21:17
you just have skipped your issue
– Amit Kumar Pawar
Jun 23 '17 at 6:27
both question and answered post by you and you also accept your answer, then why you post question here?
– Thiyagu
Jul 26 '17 at 10:29
2
@Thiyagu that is considered OK. If the questioner finds the solution they themselves should post an answer. They are also free to accept whichever answer helped them. The end goal is to help the community as a whole.
– Bugs
Jul 27 '17 at 8:42
add a comment |
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.
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
14
Doesn't seem like it really fixed the problem..
– user166390
Mar 25 '13 at 21:17
you just have skipped your issue
– Amit Kumar Pawar
Jun 23 '17 at 6:27
both question and answered post by you and you also accept your answer, then why you post question here?
– Thiyagu
Jul 26 '17 at 10:29
2
@Thiyagu that is considered OK. If the questioner finds the solution they themselves should post an answer. They are also free to accept whichever answer helped them. The end goal is to help the community as a whole.
– Bugs
Jul 27 '17 at 8:42
add a comment |
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.
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
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.
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
answered May 23 '12 at 14:05
David TuiteDavid Tuite
11.4k1881156
11.4k1881156
14
Doesn't seem like it really fixed the problem..
– user166390
Mar 25 '13 at 21:17
you just have skipped your issue
– Amit Kumar Pawar
Jun 23 '17 at 6:27
both question and answered post by you and you also accept your answer, then why you post question here?
– Thiyagu
Jul 26 '17 at 10:29
2
@Thiyagu that is considered OK. If the questioner finds the solution they themselves should post an answer. They are also free to accept whichever answer helped them. The end goal is to help the community as a whole.
– Bugs
Jul 27 '17 at 8:42
add a comment |
14
Doesn't seem like it really fixed the problem..
– user166390
Mar 25 '13 at 21:17
you just have skipped your issue
– Amit Kumar Pawar
Jun 23 '17 at 6:27
both question and answered post by you and you also accept your answer, then why you post question here?
– Thiyagu
Jul 26 '17 at 10:29
2
@Thiyagu that is considered OK. If the questioner finds the solution they themselves should post an answer. They are also free to accept whichever answer helped them. The end goal is to help the community as a whole.
– Bugs
Jul 27 '17 at 8:42
14
14
Doesn't seem like it really fixed the problem..
– user166390
Mar 25 '13 at 21:17
Doesn't seem like it really fixed the problem..
– user166390
Mar 25 '13 at 21:17
you just have skipped your issue
– Amit Kumar Pawar
Jun 23 '17 at 6:27
you just have skipped your issue
– Amit Kumar Pawar
Jun 23 '17 at 6:27
both question and answered post by you and you also accept your answer, then why you post question here?
– Thiyagu
Jul 26 '17 at 10:29
both question and answered post by you and you also accept your answer, then why you post question here?
– Thiyagu
Jul 26 '17 at 10:29
2
2
@Thiyagu that is considered OK. If the questioner finds the solution they themselves should post an answer. They are also free to accept whichever answer helped them. The end goal is to help the community as a whole.
– Bugs
Jul 27 '17 at 8:42
@Thiyagu that is considered OK. If the questioner finds the solution they themselves should post an answer. They are also free to accept whichever answer helped them. The end goal is to help the community as a whole.
– Bugs
Jul 27 '17 at 8:42
add a comment |
Window Page Scrollbar clickable when Modal is open
This one works for me. Pure CSS.
<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>
Try it and let me know
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
add a comment |
Window Page Scrollbar clickable when Modal is open
This one works for me. Pure CSS.
<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>
Try it and let me know
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
add a comment |
Window Page Scrollbar clickable when Modal is open
This one works for me. Pure CSS.
<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>
Try it and let me know
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
Window Page Scrollbar clickable when Modal is open
This one works for me. Pure CSS.
<style type="text/css">
body.modal-open {
padding-right: 17px !important;
}
.modal-backdrop.in {
margin-right: 16px;
</style>
Try it and let me know
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
answered Sep 26 '15 at 0:21
Hiruyuki XanadaHiruyuki Xanada
1
1
add a comment |
add a comment |
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.
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
add a comment |
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.
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
add a comment |
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.
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
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.
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
answered Aug 21 '18 at 9:30
karlludwigweisekarlludwigweise
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f10476632%2fhow-to-scroll-the-page-when-a-modal-dialog-is-longer-than-the-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
try overflow:auto or overflow:scroll in the dialog...
– lakshmi priya
May 7 '12 at 4:32