I have a div which has the css overflow property set to auto. But the overflow property doesn't seem to work and instead of showing a scrollbar within the div, the content of div flows outside div.
What am I missing here?
<div id="divPrvChatBox">
</div>
#divPrvChatBox
{
width:330px;
height:200px;
background-color:Yellow;
overflow:auto;
}
overflow:scroll;
This is what you need to explicitly tell the browser to use scroll-bars. When you use auto you are telling the browser that it can decide for itself, often giving some WTF results.
Set overflow to scroll:
#divPrvChatBox
{
width:330px;
height:200px;
background-color:Yellow;
overflow: scroll;
}
Example here.
I believe that (for whatever reason) your overflow CSS style is not being applied. Perhaps you have a syntax error in your CSS. Perhaps your setting is being overridden. As noted in my comment above and shown in this simple test case using overflow:auto does prevent content from drawing outside the borders of the container, and also causes scrollbars to appear as needed.
Use the Developer Tools for your browser (F12 for IE, right-click and Inspect Element for Chrome or Safari, install Firebug for Firefox) to inspect the actual styles applied to the element in question. You will either see that your rule is not being applied, of the property is not part of your rule, or the rule is being overridden by a more specific selector.
Related
I have a double scroll bar on my website in Chrome and Firefox (both browsers are up to date). I have been researching the web and stackoverflow and have tried following suggested options on the html element:
html { overflow: hidden; } - afterwards -
html { overflow: auto; } - and - html { overflow: scroll; }
None of them got rid of the double bar, even worse some blocked me from scrolling at all.
I'm not sure which other element to target or what might be causing this. Does anyone have a suggestion?
The website is https://www.lekkerlimburgs.be
I had the same problem with one of my wordpress websites. I added the following CSS which fixed the problem for me :
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
It seems like you are trying to add the css from within the html tag. For this you will need to add style tags within the body of the html. If this is the case use the following code:
<style>
body{
width:100%;
overflow-x:hidden;
overflow-y:hidden;
}
</style>
Hope this helped :)
You have overflow:auto on your HTML element, which will add a scrollbar if the element exceeds the screen size on some browsers.
MDN:
auto
Depends on the user agent. If the content fits inside, looks identical to overflow: visible, but still establishes a new block-formatting context. Desktop browsers like Firefox provide scrollbars if content overflows.
Alternatively, if you cant locate the source of the bug as explained by Gant, you can Use Browser developer tools to isolate the offending tag. What i do is
Inspect the malformed page elements using your browser developer tools
Hover on suspicious elements and Delete them while keeping an eye on the inner scrollbar. if it disappears then the element you've just deleted is the offender undo deletion (Ctrl+Z) and inspect it. Otherwise if the scrollbar persist even after deleting the element, then the element you just removed isn't the offender. therefore, undo deletion and move to another element
if the offending element is huge/broad perform step 2 on its sub elements and iterate till offending sub element is found. then check the css associated with the sub element causing the issue for overflow:auto
This approach may be better if you have tons of stylesheets and dont know how to go about it
*Adapted from Chris Coyier Fixing Unintended Body Overflow
How can I prevent the body of the page being "pushed" to the left when a scrollbar appears due to ajax content?
I can of course set overflow:scroll to the body, but it wouldn't look nice.
I am using bootstrap, but I guess it is a general question.
overflow: overlay
Building on avrahamcool's answer, you can use the property overflow: overlay.
Behaves the same as auto, but with the scrollbars drawn on top of content instead of taking up space. Only supported in WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome or Opera) browsers.
Source: MDN
This is great for when you need horizontally-scrolling content and don't want it to change size when scrollbars appear on hover.
Caveat: it is deprecated. Support is pretty much limited to Chromium, but that might go away in the future. See https://caniuse.com/css-overflow-overlay.
However, you can do a fallback of auto:
.container:hover {
overflow: auto; /* fallback */
overflow: overlay;
}
Demo: jsfiddle.net/NKJRZ/385/
Can I Use also has an interesting note:
This value is deprecated and related functionality being standardized as the scrollbar-gutter property.
However, you should check their link because browser support for this experimental feature is no better than overflow: overlay as of November 2021.
You can create a container that have a fixed width, and give the content the same width (same static width - not 100%).
that way, when the content overflows the parent, the scroll will not push the content but will flow above it.
using that, you can apply a cool way to scroll without pushing anything. by showing the scroll only when you hover the container.
Check out this simple Demo
EDIT:
Here I show the difference between setting static width, and %.
Well, the scrollbar will always push your content aside, there is really nothing you can do about that. What you can do is to always show to scrollbar for example:
html,body {
height:101%;
}
or
html {
overflow-y: scroll;
}
The best way to do this is assign value 'overlay' to overflow property. This works fine.
overflow-y: overlay;
In my case, I was getting an annoying pop event on my navbar whenever the scrollbar appears, but applying position fixed on my nav solved it for me.
I have done some testing and from what I can see there is a bug in mobile Safari on ios6.
When adding overflow:hidden on the body tag and moving an element out of the body using transform:translateX(100%); It creates an extra scrollable space for that element.
On all desktop browsers it is "hidden".
Here is a demo: http://jsfiddle.net/mUB5d/1 . Open that in Mobile safari and you will see what is wrong.
Could anyone take a look at safari 6 on Mac OS to see if the bug is present there too?
Does anybody know of any workaround besides creating another parent around my element?
Thanks for your feedback!
Nope. Safari 6 on Mac does not present with the bug. Scrollbars are not present.
I ran it on OSX Mountain Lion (10.8.2)
To further answer your question, the reason this is happening probably has more to do with Mobile Safari's zoom rendering than an overflow hidden bug. The element is in fact being hidden off screen (notice below where I have scrolled over to the right all the way, it still doesn't show me the full 100% width element - 90% of it is in fact being hidden.
It likely has something to do with iframes, and page zoom. Still looks like a bug though.
I'm assuming you're demonstrating in JSFiddle from a real life example. If you go back to your real life example (apart from iframe territory), try adding this meta tag to the head if you don't already have it, and see it this helps:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is normal behaviour on iOS (and iOS only). You can work around it by declaring overflow: hidden on both html and body element. In addition, you should set the body to position: relative.
Overflow behaviour
There are several things at play here. To understand why the fix works, we first need to have a look at how the overflow of the viewport is set.
The overflow of the viewport is determined by the overflow setting of the html element.
But as long as you leave the overflow of the html element at its default (visible), the overflow setting of the body gets applied to the viewport, too. Ie, you can set either html or body to overflow: hidden when you target the viewport. The overflow behaviour of the body element itself is unaffected - so far.
Now, if you set the overflow of the htmlelement to anything other than visible, the transfer from body to viewport does no longer happen. In your particular case, if you set both overflows to hidden, the setting of the html element gets applied to the viewport, and the body element hides its overflow as well.
That's actually the case in every reasonably modern browser out there, and not specific to iOS.
iOS quirks
Now, iOS ignores overflow: hidden on the viewport. The browser reserves the right to show the content as a whole, no matter what you declare in the CSS. This is intentional and not a bug, and continues to be the case in iOS 7 and 8. There is nothing anyone can do about it, either - it can't be turned off.
But you can work around it by making the body element itself, not the viewport, hide its overflow. To make it happen, you must first set the overflow of the html element to anything other than visible, e.g. to auto or hidden (in iOS, there is no difference between the two). That way, the body overflow setting doesn't get transferred to the viewport and actually sticks to the body element when you set it to overflow: hidden.
With that in place, most content is hidden. But there still is an exception: elements which are positioned absolutely. Their ultimate offset parent is the viewport, not the body. If they are positioned somewhere off screen, to the right or to the bottom, you can still scroll to them. To guard against that, you can simply set the body element to position: relative, which makes it the offset parent of positioned content and prevents those elements from breaking out of the body box.
Answering in code
There is one final gotcha to watch out for: the body itself must not be larger than the viewport.
So the body needs to be set to 100% of the viewport width and height. (The credit for a CSS-only way to achieve it goes to this SO answer.) Margins on the html and body elements have to be 0, and the html must not have padding or a border, either.
Finally, in order to deal with body padding, and in case you ever want to set a border on the body, make the math work with box-sizing: border-box for the body.
So here goes.
html {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
overflow: hidden;
position: relative;
box-sizing: border-box;
margin: 0;
height: 100%;
}
NB You can set body padding and border as you please.
After struggling with this for a while I've found that both html and body tags need overflow hidden to actually hide the overflowing contents. On elements inside body overflow hidden works fine, so our choice is an extra css rule or a wrapper element.
for me it works
I have implemented in the left side menu
if($('.left-menu-panel').is(':visible')) {$("body").addClass('left-menu-open');$("html").css('overflow-y','hidden'); $('body').click(function() {$("body").removeClass("left-menu-open") ;$("html").css('overflow-y','visible'); });$('#off-canvas-left').click(function(event){event.stopPropagation();}); }
Or i have been building web pages for too long without a break or something really weird happened.
<div style="background-color:#0F0; margin:5px; height:5px;"></div>
Will result in a long bar of 5 height across the width of the parent div. This should normally not be visible since i gave the div no width.
I tried everything, messed up my whole CSS layout and nothing seemed to get rid of it. I even check some divs of me in that same project that still work like this.
So i opened a new project and just filled in that line above to make sure there wasn't some style setting messing things up. But still there is a green bar showing.
I just want my div to be the size of the text in it.
Again, i could be seeing things but this happened all of a sudden and i'm really clueless...
use display:inline because a div element automatic get the display:block
Your div must have display:block either in your code or inherited from your browser.
change it to display:inline for your desired outcome.
Example here.
http://jsfiddle.net/Hn2xP/1
Break the document flow
By default, div element has it's style display property set to block, what makes it's width to fill the dimensions of parent.
You have two options to make it clip to text, position: absolute or float: left (right works also, depends), as in:
<div style="background-color:#0F0; margin:5px; height:5px; position: absolute;"></div>
or:
<div style="background-color:#0F0; margin:5px; height:5px; float: left;"></div>
For more information, see CSS Floats and/or CSS Positions.
P.S. Bear in mind, that absolute position and/or floated element will remove it from document flow.
span instead of div (display: inline)
If you want to keep the document flow, use span instead of div - it's display property is inline by default, as Blowsie suggested.
<span style="background-color:#0F0; margin:5px; height:5px;"></span>
display: inline-block
There is also an option with display property set to inline-block, but it's compatibility is limited. See CSS Display property information for more details.
<div style="background-color:#0F0; margin:5px; height:5px; display: inline-block;"></div>
Usually a padding issue. Difficult to diagnose without seeing code or example of site error.
try:
div {padding: 0px;}
in your css
By default, the width of a div is auto, meaning that it will fill the entire available content. To have "no width" as you seem to want, set the width to zero explicitly. Or, use one of the other answers...
The essence of the ie6 bug (dropdown entries must be truncated via overflow hidden to prevent ie from incorrectly expanding instead of acting as overflow:visible) can be seen in it's current (hacky) form in the screenshot below, and at the site http://zd-cms.com
Wrong (ie6):
http://img249.imageshack.us/img249/352/screenshot68.png http://img249.imageshack.us/img249/352/screenshot68.png
Right (FF, IE8, Chrome):
http://img402.imageshack.us/img402/7208/screenshot69.png http://img402.imageshack.us/img402/7208/screenshot69.png
The menu entry should show:
Contact Us
Resellers
Support
Designer Services
But since I can't get overflow:visible working or otherwise simulate it, parts of the dropdown menus get cut off. Currently the css in the ie6-specific stylesheet is:
#zd-nav {
padding-left:0;
margin-left:0;
background-color:transparent;
}
#zd-nav .zd-sub-nav{
margin-top:5px;
**width:73px**;
**overflow:hidden;**
}
A few solutions to the bug that I've tried:
I'm aware of the ie6 overflow:visible bug, (as per here: http://www.positioniseverything.net/explorer/expandingboxbug.html ), which renders overflow:visible null and void.
Read through: Strategy for Fixing Layout Bugs in IE6? and tried a few hacks to try to make it really act as overflow:visible, but nothing worked.
Right now, I've got the dropdown part of the menu set to overflow:hidden as a last ditch solution because I can't get ie6 to let the menu act in an overflow:visible manner.
Pointing out any problems with the nav in ie7 or ie8 would be much appreciated as well.
Suggestions?
This worked for me:
#zd-nav .zd-sub-nav li{
float:left;
clear:left;
position:relative;
z-index:20; /* or some other arbitrary biggish number */
}
The float gives the li the right width, and the position relative and z-index make it show above (ie not constrained by) the ul.
Try this out (assuming that you want the drop down [plus sub sub sub] to also be allowed to "float" over any other elements on the page that get in the way):
.zd-nav-active {
position: relative;
}
.zd-sub-nav {
position: absolute;
z-index:10000;
}
Forcing the li containg the sub navigation to position relative will not change position on the page. It does, however, allow you to use position absolute on child elements, while keeping them contained within the parent by default, AND releasing it from the "flow" of the page (thus preventing the push down effect).
Try either:
word-wrap:break-word; /*use this in the #zd-nav .zd-sub-nav class*/
or...
width:100%; /*instead of setting the width to 73px*/
you could do height:100%; also.
It's a hasLayout issue that Microsoft invented. Found the info here: http://zoffix.com/css/ie/haslayout.shtml
Hope this helps...
This should work
#zd-nav .zd-sub-nav{
margin-top:5px;
width: auto;
display: block;
overflow: visible
}
An auto width is used to adopt the size of each navigation item without needing to give each one a fixed width.
Hope this helps.
I suggest to use a relative position to the container, with specifying top and left and width