The spec says that a horizontal scrollbar is supposed to be always shown if overflow-x: scroll is set.
On my website I often post code in a <pre>-Block. As this has no predefined width, but the surrounding div does have a maximum (defined as percentage), it seems that I can not figure out how to achieve the following:
In case a code block is not too wide, hide the horizontal scrollbar.
If it exceeds the width, show a scrollbar.
Any hints? I think I have tried most of the combinations of overflow-x and -y, but none seem to do what I want.
Use:
overflow-x: auto;
auto tells the browser to only show a scrollbar if the content exceeds the width of the box.
Related
No matter what I do, I can NOT get the code block to create its own scroll bar on smaller breakpoints. It continuosly creates a full page scroll bar.
here is the live preview with the error.
I tried every form of overflow property. I tried wrapping it in a another div with overflow: scroll;.
code elements are inline so width/height doesn't work as expected exactly unless you make it a block/inline-block.
See: https://stackoverflow.com/a/9670566/1265817
Another approach would be to set the pre wrapper to a set max-width of the screen width.
pre {
max-width: 95vw;
}
What I want to achieve:
Make it possible to select which columns you should see in a table, and if you select "too many for the width to show", you should get a scrollbar to scroll horisontally.
So on a mobile device I have a table and a container that wraps around the it. The container is set to overflow-y: scroll.
The container is as wide as the mobile allows it, but when I add multiple columns so it overflows the with and cause a scroll, the content gets wider, as expected, but not that it pushes the whole content on my side. Should it not cut off the overflow in width? If not, how can I achieve that? (only getting scroll and keep the main width of the container)
Picture of what is happening (the start state was that the container was as wide as it could be on the screen):
If I understand your question correctly
You can can add these styles to make your table scrollable horizontally :
.classname {
width:'as much as you need';
overflow-y: hidden;
overflow-x: auto;
}
I'm using twitter-bootstrap and I keep seeing a horizontal scroll on the right most module (trending) part of this HTML page. When I reduce it from span2 to span1, it makes the image tiny. It doesn't seem like the image or text takes up the rest of the space either. Any advice on how I can get rid of the horizontal scroll?
Additionally, when I make the width of the window smaller the small image thumbnails clash with the main video. How do I fix this as well?
The page can be found here.
You will want the overflow-x property
.my-class {
overflow-x: hidden;
}
There is also overflow (for vertical and horizontal overflow) and overflow-y (for just vertical overflow).
I know people don't like w3school but here are the values that overflow-x can have http://www.w3schools.com/cssref/css3_pr_overflow-x.asp
For an inline solution:
<span style={{
overflowX: "hidden"
}}>
hidden can also be scroll, auto, or visible
I want to add div to my website which has variable width, and that it will display scroll bars when the width is smaller than the longest line.
I tried wrapping such a fixed width element, in a variable width (100%) but that didn't work. I got the scroll bars on the entire page.
Any thoughts?
Thanks
Yaron
You can apply the overflow CSS property to the problematic div:
#problematic-div {
overflow: hidden;
}
This defines what happens to content that overflows the content area of an element. For the value scroll, user agents are supposed to provide a scrolling mechanism whether or not it is actually needed; thus, for example, scrollbars would appear even if all content can fit within the element box.
You can try some examples here.
Hope it helps.
I have a div which pops up into the middle of the screen and is populated with some arbitrary content. I need it to scroll if the content added doesn't fit within the space available.
The basic styling is left: 25%; width: 50%; max-height: 70%
If the screen is big enough it all works fine. In Firefox, if there's not enough space, it also works nicely, adding a vertical scrollbar to the division. But in IE, it adds an annoying and unrequired horizontal scrollbar, and I can't figure out a way to get rid of it.
You can see some screenshots of what I mean here:
http://dl.dropbox.com/u/15633144/popup.html
Sorry I can't post the actual HTML, which certainly doesn't make this any easier! But I'm hopeful this is a standard problem which people have worked around before.
The usual solution posted on here plenty of times is overflow-x / overflow-y. But in some cases the div contents do actually need to scroll horizontally, so I can't use this technique.
First IE don't support max-height CSS property.
And the horizontal scrollbar will show up if some elements inside your container have a width overflowing. You probably have some elements inside with a width:100%. As IE adds random borders/margins here and there, the width of inside elements become larger than its container.
try looking here
CSS div element - how to show horizontal scroll bars only?
I'm afraid that because you said that sometimes you need to scroll then you will need horizontal scrollbars. Which if you hid them by overflow-x: hidden; wouldn't allow you to scroll. You could work a jQuery If statement and say if window.width was more than the width of your content, show the scrollbar, if not, then hide it!