I need to put a wide and long table in a relatively short and narrow container, and I want to keep the table heads always visible. I've got this to work as you can see in the JSFiddle below.
http://jsfiddle.net/chemLk1z/1/
The important code is this:
<div id="h">
<div id="v">
<table> [... 10 rows of content ...]
</div>
</div>
With CSS:
#h {
width: 300px;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
}
#v {
width: -moz-fit-content;
width: -webkit-fit-content;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
}
table {
width: 500px;
/* Height will be more due to content. */
}
As you can see in the JSFiddle, the scrolling experience on Chrome is great. But on Firefox (v38.0.5 Mac OS X) I can't scroll horizontally and vertically at the same time, I need to wait for 10 seconds or so before it allows me to scroll in another dimension.
Why is this, and what can I do to fix it?
Related
The problem is that I have a body (which it can't be positioned fixed because it causing bugs to the current project) with a lot of content and a modal with scrollable content inside, the problem is that on iOS if I turn the overflow to hidden nothing happens.
In my case, setting height: 100vh and overflow: hidden to class="parent" is not working.
I tried different things and tried different hacks to solve this issue but nothing fixed yet I saw here also different methods but for different situations.
I looked also for overflow hidden alternatives but nothing found yet...
If you guys have some ideas/refs/a way to solve it post it here I appreciate, thank you.
Here is the snippet https://codepen.io/anon/pen/zJQoJR
<body class="modal-open">
<div class="parent">
<p>Body scrollable content</p>
<div class="container-child">
<div class="child">
<p>Modal scrollable content</p>
</div>
</div>
</div>
</body>
Putting the overflow hidden on your html tag might help:
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}
I got pretty good results by adding this to your css:
body.modal-open > .parent {
position: fixed;
overflow: hidden;
height: 100%;
}
And to make the modal 'bouncy' on your iOS device, change your .container-child css to:
.container-child {
position: fixed;
background-color: rgba(0,0,0,0.4);
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch; /* <-- added */
}
Here's a demo on codepen: https://codepen.io/anon/pen/mzJXPJ
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.
I've recently stumbled upon a rather interesting behavior related to browser scrollbars. Here is the link to demonstrate this: http://jsfiddle.net/5L7tyswh/5/
HTML:
<div class='container'>
<div class='fix' />
</div>
CSS:
body {
margin: 0;
}
.container {
position: absolute;
overflow: auto;
width: 100%;
height: 100%;
max-height: 400px;
max-width: 400px;
}
.noscroll {
overflow: hidden;
}
.fix {
width: 400px;
height: 400px;
background-color: green;
}
So the situation is basically this: I want a fixed sized div that is scrollable if the window becomes smaller than the minimum. I explicitly want the scrollbars to appear 'in the div' so I created a container that acts as the 'scrollpanel'. So far so good.
The strangeness comes when you shrink the window small enough for the scrollbars to show up, then enlarge it again. What happens is that the scrollbars don't hide as they should (at least I think it would be logical). I don't know if it is a bug or a feature, but my tip is on the former. My only explanation to this is that the vertical and horizontal scrollbars prevent each other from disappearing.
The workaround is the commented javascript, if you uncomment it the scrollbars behave as they meant to.
Can anyone explain this better?
Update:
I can only reproduce it in Chrome so far. It works in IE11 and Firefox.
Looks like a bug or a peculiarity of Chrome ;)
You can prevent the behavior in Chrome without javaScript and extra classes by using #media directive in your css
#media screen and (min-width: 400px) {
.container {
overflow: hidden;
}
}
This prevents the scrollbars to appear when the window is bigger than 400px. Works on all (recent) browsers.
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