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.
Related
I have these TWO websites which I just realised both have this issue, and it lies with the navbar. When on mobile device size they get these annoying scrollable white borders on just the right side.... changing padding and margin of anything doesn't help at all. But changing position: fixed; to relative fixes it but obviously makes the navbar not stick. So for some reason the z axis layer of the document is getting a bigger overall width than the body or normal y and x axis divs.....?
Site 1: http://myleisure.com.au
Site 2: http://danceforovariancancer.com.au
I'm not sure about your navbar being the problem. I can't reproduce it on my phone to know for sure, but I did test it on OSX Chrome at 320px wide.
I went into the dev tools and either deleted elements or manually added overflow: hidden; to find out where it made a difference. From what I saw, various minor problems are hidden throughout the sites that are causing overflow (and thus, scrollbars).
On the first site, this particular rule seems to be the actual culprit...
In "css.css":
.col-centered {
...
margin-right: -4px;
}
On the second site, you have nested .rows. A .container has 15px of padding to offset child .row's -15px margins. But .rows do not have the same padding, so they cannot be nested.
Your nesting problem appears at the "BONUS EVENT" heading within the
Acts section.
Also, add the img-responsive class to the image of Jane Hill's
signature in the About section.
Finally, at 320px width, the email provided in the footer is too long
to fit. I would recommend that you change the paragraph wording and swap it out for a mailto link like:
Emma Robinson
Try this:
html, body {width:100%; overflow-x:hidden;}
I have given a small amount (-7px) negative margin to a div to align the text with an image next to it.
The divs have some different sizes according to a few media queries. Everything works fine except in the largest size which, for some reason, adds a small scrollbar and the negative margin is suddenly clipped.
I have no idea why this is happening?
Even adding height to the parent doesn't help and the scrollbar still appears for some reason?
For the life of me I can't recreate it in jsbin either, so I'm wondering if anyone had any tips on what could be causing the sudden appearance of a scrollbar/clipping?
EDIT
Apologies for the delay, took a while to strip out all the extraneous content but here is a working test that demonstrates the issue.
If you 'zoom out' or make the window very large, you can see the heading clipping suddenly. Forcing overflow: visible also does nothing. Definitely something odd is happening that is causing the scrollbar to suddenly appear too.
Here is a video that demonstrates the issue. My browser is zoomed out to 75% to simulate a larger screen. I am using Chrome 30.0.1599.22 on Mountain Lion.
To answer your question:
what could be causing the sudden appearance of a scrollbar/clipping?
It's caused by this CSS:
body.catalog-product-view .col-center {
overflow-x: hidden;
width: 1800px !important;
}
And to be exact, it's caused by overflow-x: hidden;
According to this answer, W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
Here are possible solutions: CSS overflow-x hidden and overflow-y visible
However, they didn't seem to work when I tried them with your code.
Some example html/css would help us answer your question, but if the scrollbar is causing the negative margin to be clipped, why not just hide the overflow on the div to prevent the scrollbar from rendering?
div
{
overflow-y:hidden;
}
waffl.
SO, here is the root of your bug =)
#media (min-width: 2088px)
body.catalog-product-view .col-center {
overflow-x: hidden; /* this makes scroll visible and the text being cutted */
}
Try this in CSS:
body { max-width: 200%;
}
div { width: 170%; }
If you define the width in percent values everything will be adjustable.
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 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!
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.