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
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;
}
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;
}
After applying this: (to fix extra space on the right):
html {
width: auto !important;
overflow-x: hidden !important;
}
body {
width: auto !important;
overflow-x: hidden !important;
}
the vertical is no longer smooth, and sometime is stuck with the addressbar (for mobile devices).
is there a way to fix the vertical scroll?
im using bootstrap 3.1
Thanks.
Please check height definitions if there are any. Usually that's what causes a sticky vertical scroll in my experience.
Also, "extra space to the right" means you have defined widths "width:300px;" instead of percentages that are causing overflow, you should address these instead of trying to play around with the html/body.
Try inspecting elements until you find which element is causing your page to overflow, and change it's width to fit on a mobile screen, or convert it to a percentage of the total width of the screen so that it scales nicely.
If you give us more code, maybe even a website link we can give you a better answer, but you should never have to hide overflow, use auto width or overuse !important tags like that on the html/body.
My page is 1920px width, and for some unknown to me reason, my scrollbar wants to scroll page into the right, where there is empty space only. I tried specifying <html style="width: 1920px;"> but that does nothing, bottom scrollbar just scrolls like the page was 2100px... Is there anything I can do about it? Like, specifying fixed horizontal overflow?
Edit: Here is the link to the page: look only at homepage, because on the other pages it looks ok: http://scyk.pl
You have a problem in the buttons bar you have to look in your code for :
<div class="frontPageButtons">
the position of the div is relative and you set left to 30% :
.frontPageButtons {
left: 30%;
position: relative;
}
You most likely have a child element that is pushing the containing block wider. Overflow hidden will work, but generally it is better to avoid setting fixed widths for child elements unless you are defining a new layout context.
try to set min-height:500px; in css
happy coding...
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!