I have a modal implemented in CSS and it is getting cut off at the bottom of the page:
I've tried the following style attributes:
style = "max-height: 100%; overflow-y: scroll; margin: auto"
But I am unable to make the modal fit in the page, on mobile or desktop. How can I fix this?
Update:
Tried:
style = "max-height: 95vh; max-width: 95vw; overflow-y: auto;"
This gave some room at the bottom, but I still want the modal to fit in the page:
Edit 2:
I've updated my modal to:
class="modal" style="overflow-y: auto; max-height: 100vh; padding: 30px 0px 50px 0px; box-sizing: border-box; height: 90vh; z-index: 1000"
and my modal content to:
class="modal-content" style="height: 80vh; max-height: 600px; position: relative; display: flex; flex-direction: column; width: 95vw; max-width: 600px; border-radius: 4px; overflow: auto; box-sizing: border-box"
This seems to solve the problem I was having that caused the bottom button to get cut off; however, now, the header doesn't look right. It is pushed down. What can I do to fix this?:
CSS has the unit vh (viewport height) for this.
max-height: 95vh; /* 95% of the viewport's height */
This works on any device, mobile or desktop, with a supporting browser. Even Internet Explorer 9 supports it.
Regarding the overflow, I recommend you overflow-y as auto, not scroll. The difference is that scroll will always result in a scrollbar, even if not needed.
Remember to also limit the width of the modal. Long playlist names might, especially on mobile devices, lead to unwanted layout results otherwise.
For width, the corresponding unit is vw (viewport width).
Related
I have prepared modal that works perfectly fine in Chrome, but crashes in IE.
Could you please check what am I doing wrong? I tried multiple fallback-prefixes etc, wrapping with flex-row and so on.
http://plnkr.co/edit/Z2pQDsIMjqs4jWvytcVf?p=preview
.flex-container {
background-color: #ccc;
width: 100px;
max-height: 100%;
min-height: 200px;
overflow: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
.middle {
flex: 1 1 auto;
overflow: auto;
max-height: 100%;
}
Version that works on Chrome satisfies all requirements:
modal has to be aligned horizontally in the middle
footer and header have static height
when window is too big, the modal should not stretch any more
when window is to small to show full modal, the scrollback should appear for "middle" content, so the hedr and footer will always be shown
modal should be as small as possible to not show any blank spaces under "middle" content, so I cant set height: 100% on any wrapper (that would solve issue for Ie, but not for me :( )
but on IE11, when .middle is to big it either overflows the footer or makes the scroll appear on the whole modal.
since iOS 7.1 when you scroll down a page the viewport size changes but that doesnt update 100vh is there any way to stop the minimal ui or update the viewport on scroll?.
example site http://goo.gl/Umbd47
I have included a picture of the problem below and one of how it should look.
If the scrolling element is not body, minimal UI should not activate.
Wrap your content in a div with overflow: auto and set your body's overflow to visible. Both body and the div must have their heights and widths set to 100%.
So your css might look like:
body {
width: 100%;
height: 100%;
overflow: visible;
}
#container {
width: 100%;
height: 100%;
overflow: auto;
}
I have this scrollable div, which (on my Mac in Chrome) hides the scrollbar when I don't scroll. On windows 8 however, it doesn't work in Chrome and Firefox.
Ie doesn't support this too, but I've enabled it using the following CSS:
-ms-overflow-style: -ms-autohiding-scrollbar;
Is there any way to enable this behaviour for Chrome and Firefox
Here is a jsfiddle
maybe you can use something like that?
body {
margin:0;
padding:0;
overflow-y: hidden;
}
body:hover {
overflow-y: scroll;
}
http://jsfiddle.net/4RSbp/165/
Scrollbar is hiding on your Mac because this is a system preference (System Preferences > General > Show scroll bars). And unfortunatelly there is no version of -ms-overflow-style for Firefox or Chrome.
For anyone comming here, if you want to hide scrollbars in a cross-browser cross-system way and keeping the scrollability enabled without visual glitching of mouse over rendering; hiding them behind the limits of your container is a good approach. (Beware, this will be long)
Let's say you have a scrollable container and you want to hide the vertical scrollbar (even the thin transparent one that moderns systems shows). its ID is #scrollable:
<html>
[...]
<div id="scrollable">Some Y large content</div>
[...]
</html>
To achieve what we want, #scrollable must be contained by a node exclusively for it (a div would work, in this example #scrollable-cover) and we must know #scrollable layout width and height. Lets say it'll be an area of 800px x 900px. So we got:
<html>
[...]
<div id="scrollable-cover">
<div id="scrollable">Some Y large content</div>
</div>
[...]
</html>
And its CSS:
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
}
With that, #scrollable will be stretched to the height of its inmediate parent (#scrollable-cover) and its large content will render it like an scrollable box, but, since its width is 20px bigger than its parent, which has an 'overflow: hidden' property, the scrollbar will not be shown, because it renders on the 20px hidden at the right of #scrollable.
This lead us to an inconvenient, the content of #scrollable could also be rendering in that hidden 20px width area; to avoid that, there is two methods. One is to wrapper all the content of #scrollable in a #scrollable-wrapper with 800px width and auto height:
<html>
[...]
<style>
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
}
#scrollable-wrapper {
width: 800px;
height: auto;
}
</style>
[...]
<div id="scrollable-cover">
<div id="scrollable">
<div id="scrollable-wrapper">Some Y large content</div>
</div>
</div>
[...]
</html>
This way all content will be rendered in a 800px width layout inside our scrollable box. But, if you dont want to add another element, you can solve this with the Second CSS only option, using box-sizing an a 20px padding at the right:
#scrollable-cover {
width: 800px;
height: 900px;
overflow: hidden
}
#scrollable {
width: 820px;
height: 100%;
overflow: scroll;
padding-right: 20px
box-sizing: border-box;
}
This way, anything rendered inside #scrollable will avoid the 20px hidden area at the right, and 'box-sizing: border-box' will tell the browser to include the 20px of the padding in the total 820px width of #scrollable (otherwise, it'll grow to a computed total of 840px). Check box-sizing compatibility here: http://caniuse.com/#search=box-sizing
And of course, this example could also work with horizontal scrolling, just increasing the height of #scrollable 20px above the height of it's inmediate parent. That's the clue ;)
For anyone who got here not because of system preferences, but because scroll bars in general are visible in on Windows Systems in Chrome:
Do not save your css like that:
overflow: scroll;
but rather
overflow: auto;
This way it will only show on Windows Chrome Browser if necessary.
found here: Hide useless scrollbars that show up on Windows only
In my app targeting mobile devices (with cordova but that shouldn't matter)
I want to show a scrolling div that fills the page except for a top and bottom navbar:
jsfiddle example
As far as I understand, I need to specify the height of the div in order for the div to scroll. (line 30 in the css - currently commented out):
#long {
background: -webkit-linear-gradient(red, blue);
width: 90%;
/* scroll */
overflow-y: scroll;
/* for the navbar */
margin-top: 48px;
float: left;
/* to make the scroll work */
/*height: 347px;*/
-webkit-overflow-scrolling: touch;
}
I would really prefer if I would have to because using discrete intervals for media queries will always risk some obscurely sized phones to have broader bottom margins than intended.
An additional requirements that might constrain potential solutions:
- The app has several "pages" which are div's that are moved out of the viewport to the left or right when not needed but not removed from the document.
Any ideas how to solve this? Preferably using only CSS.
If the page fit the viewport dimensions, I’d create a wrapper with some padding to position the navbar absolutely and then make an inner container scroll. This will always fit the viewport height and so doesn’t require a fixed height.
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
height: 100%;
padding-top: 48px; // Allow space for navbar
}
.inner {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.navbar {
height: 48px;
position: absolute;
top: 0;
right: 0;
left: 0;
}
The HTML would look like:
<div class="wrapper">
<div class="navbar"></div>
<div class="inner"></div>
</div>
Demo
One of the sites I'm designing breaks like this, when I resize it. Why doesn't it stick to browser's edges? How can I accomplish this?
I used CSS Layout Generator to generate the layout initially. I used the liquid layout option since I wanted to make my site responsive.
Within the <body> there's a wrapper <div> which is styled like so:
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
The wrapper contains all the header, middle-section and footer which inherits from the wrapper's width. They have the max-width set to 1200px and is centered.
You need to remove the User Agent styles for the left and right padding on body:
body {
padding: 0;
min-width: 320px;
max-width: 100%;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
See this fiddle. If you change the selector .incorrectruledisabled to .incorrectrule, you should see the results you are getting in your attached image.
You can't give something an upper limit on its width and also expect it to occupy the full width unconditionally. Please let me know if I am misunderstanding your question.
EDIT: Here is an example where the contents of the header, middle and footer are centered, using text-align, but they themselves are not.