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;
}
Related
I'm designing a fullscreen website, using javascript to set the height and the width of my sections.
I'd like to have, at the bottom of each section, a diagonal separator.
Now, here's my issue:
In order to display the diagonal divs, i need to have overflow set to auto on the container, but if it is auto, the full website scroll to the right as the diagonal div is bigger than the body.
I need the container to have an overflow:hidden, but still be able to see the diagonal dividers.
You can see what i'm talking about here:
http://codepen.io/anon/pen/emoLpd
If you uncomment out //overflow:hidden from div.website-section you will see that the diagonal is not visible anymore.
How can i have the overflow hidden and the diagonal divs displayed at the same time?
Thanks in advance for any help.
PS: sorry for the tons of code, but i'm developing using less and i pasted the full code.
Here's a working example, forked from your example: http://codepen.io/anon/pen/jERvrE
No need to set overflow:hidden on the .website-section divs. You can simply set overflow-x: hidden on the body element, which keeps horizontal scrollbars from appearing but leaves vertical scrolling unmodified.
This is the important part:
body {
overflow-y: auto;
overflow-x: hidden;
}
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!
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.