This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
I have a div set to hide content with overflow-x and display (visible) content with overflow-y.
Unfortunately it's not working how I'd like it to. It adds vertical scroll bars - I assume this is because overflow-x and overflow-y don't function together.
As far as I'm aware if one overflow is set to hidden, the other gets set to auto.
Is there any other way around this? So I can have the overflow hidden horizontally and displayed (without a scroll) vertically?
Just so there's no confusion here's a fiddle to explain a little more: http://jsfiddle.net/kwnQk/
edit
Here is the actual issue I'm having: http://jsfiddle.net/kwnQk/1/
I have a select box, created from divs and jQuery, that ends up going over the div height, causing it to add scroll bars.
It's a shame the overflow function works the way it does because the div's overflow-x must be hidden, causing the div's overflow-y to be auto.
edit 2
Please see this new JSFiddle to show exactly why I need the overflow: http://jsfiddle.net/kwnQk/3/
It consists of sliders too, which need to be set to a certain width. And they cannot take up the entire height of the page so I have to limit their height, too.
I would think you can just leave the overflow property to visible and just use padding left and right.
Unless you have images, the text should just get wrapped.
For images, you should look at using children divs with width:100%
Can you try some jQuery scroll plugins for this?
http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html
http://baijs.nl/tinyscrollbar/
http://www.net-kit.com/jquery-custom-scrollbar-plugins/
Try the jquery selectbox plugin, it's great and do exactly what you are trying to:
http://jquery-ui.googlecode.com/svn/branches/labs/selectmenu/index.html
Bad combination, unfortunately. From the documentation http://www.w3.org/TR/css3-box/#overflow-x:
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’.
Related
I've been trying to create a couple of typical layout examples using Singularity, and I have a question about grid-span and floats.
I've created a sample scss stylesheet and html layout. Here's the complete example on Sassmeister.
http://sassmeister.com/gist/a7ca98b7520b12bd6241
My question is whether the containing content div <div id="content"> is necessary? I'm having to use it with a clearfix mixin in order to 'pull' the div down and keep the footer below the content section and aside.
Is there another way to achieve this layout with Singularity, without having to use the surrounding clearfix div? Is there an option for grid-span in the main section that will either not use a float, or self clear this section?
To understand your problem you have to learn how floats and clearing work.
0.
When you float an element, it is removed from the flow. It's vertical height does not count when calculating the height of the container.
1.
The intended usage of floats is to add images to a long sheet of text. The text would wrap around the floated image and increase its overall height and stretching the container vertically, just like an object submerged into water increases the height of water surface.
Before:
After:
2.
If the floated image is located very close to the bottom of the text, it will pop it's bottom out of the bottom of the container, just like an iceberg exposing it's top from the water.
3.
Now imagine that your text is comprised of paragraphs and each paragraph starts with a title. When there's an image floated at the bottom of a paragraph, the image would stretch into the next paragraph, pushing the next paragraph's title aside.
4.
If you don't want that to happen, you apply clearing to paragraph titles:
h2 { clear: both; }
This basically tells the titles: don't let floated images push you aside, let them push you down instead.
5.
But web pages have become more than formatted text, and HTML/CSS didn't provide any means of formatting layouts. So we started using floats for layouts. It's ugly, it's like using wallpaper to sew your clothes, but we have no better option (until Flexbox becomes a thing, and it seems to already).
What happens when you float all content in a container? There will be no flow left, no text to stretch the container vertically, and it's height will be zero (plus border and padding):
6.
You already know that in order to make containers regain their height (wrap around the floated content) we have to apply a clearfix to the container. But what a clearfix actually is?
When you apply a clearfix to a container, you use :after in CSS to create an additional element within the container, after all it's content. Then you apply clearing to the little mother fcuker:
.container:after {
content: '';
display: block;
clear: both;
}
7.
Now back to your question! What's the alternative of using the clearfix?
You've probably have guessed already.
If you've got got content below the floated element, simply apply clear: both to the next element below the floated one! Just like we did in #4 for paragraph titles.
In your case:
footer { clear: both; }
And here's a demo: http://sassmeister.com/gist/df8af8a3c7f8d3df2796
The CSS2.1 spec mandates that overflow other than visible establish a new "block formatting context". This strikes me as odd, that a property whose obvious purpose is to hide overflow without affecting layout, actually does affect layout in a major way.
It seems like overflow values other than visible combine two completely unrelated features: whether a BFC is created and whether the overflow is hidden. It’s not like "overflow:hidden" is completely meaningless without a BFC, because floats historically can overflow their parent element, hiding the overflow without changing the layout seems sensible.
What are the reasons behind this decision, assuming they are known? Have the people who worked on the spec described why this was decided to be the case?
I asked about this on the mailing list on your behalf; the thread can be found here. In summary, this has to do with scrolling content for the most part:
Fundamentally, because if the spec didn't say this, then having floats intersect with something that's scrollable would require the browser to rewrap (around intruding floats) the contents of the scrollable element every time it scrolls. This is technically what
CSS 2.0 required, but it was never implemented, and it would have been a huge problem for speed of scrolling.
-David
Most likely, it refers to scrollable content in a box that may occur outside of the float's parent but would intersect with the float. I don't think this is related to rewrapping content around a float within a scrollable container, as that already happens naturally, plus the float would clip into the container and scroll along with the rest of its content anyway.
Finally this makes sense to me. In fact, I'm going to provide an example here so hopefully it makes sense to you and anyone else who may be wondering. Consider a scenario involving two boxes with the same fixed height and overflow: visible (the default), of which the first contains a float that stretches beyond its parent's height:
<div>
<p>...</p>
</div>
<div>
<p>...</p>
<p>...</p>
</div>
/* Presentational properties omitted */
div {
height: 80px;
}
div:first-child:before {
float: left;
height: 100px;
margin: 10px;
content: 'Float';
}
Notice the similarity to one of the examples given in section 9.5. The second box here is simply shown to have overflowing content for the purposes of this answer.
This is fine since the content will never be scrolled, but when overflow is set to something other than visible, that causes the content to not only be clipped by the bounds of the box, but also to become scrollable. If the second box has overflow: auto, this is what it would look like had a browser implemented the original CSS2 spec:
Because of the float, attempting to scroll the content would cause the browser to have to rewrap it so it doesn't become obscured by the float (and what should happen to the part that scrolls out of the top edge?). It would probably look something like this when scrolled to the bottom:
The catch here is that the browser has to rewrap the content every time it repaints it during scrolling. For browsers that are capable of pixel-based smooth scrolling — which is to say, all of them — I can see why it would be a performance disaster! (And a user experience one, too.)
But that's for when the user can scroll the content, right? This would make sense for overflow: auto and overflow: scroll, but what about overflow: hidden?
Well, a common misconception is that a container with overflow: hidden simply hides content by clipping and cannot be scrolled. This is not completely true:
While scrolling UI is not provided, the content is still scrollable programmatically, and a number of pages perform just such scrolling (e.g. by setting scrollTop on the relevant element).
-Boris
Indeed, this is what it'd look like if the second box was set to overflow: hidden and then scrolled to the bottom with the following JavaScript:
var div = document.getElementsByTagName('div')[1];
div.scrollTop = div.scrollHeight;
Again, notice that the content would have to be rewrapped to avoid being obscured by the float.
Even though this wouldn't be as painful for performance as had scrolling UI been available, my best guess is that they made boxes with any overflow value other than visible generate a new BFC mainly for the sake of consistency.
And so, this change was brought about in CSS2.1, documented here. Now if you apply an overflow value other than visible only to the second box, what a browser does is push the entire box aside to make way for the float, because the box now creates a new block formatting context that encloses its contents, instead of flowing around the float. This particular behavior is specified in the following paragraph:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.
Here's what it looks like with overflow: auto for example:
Note that there is no clearance; if the second box had clear: left or clear: both it would be pushed down, not to the side, regardless of whether it established its own BFC.
If you apply overflow: auto to the first box instead, the float is clipped into its containing box with the rest of the content due to its fixed height, which is set to 80px in the example code given above:
If you revert the first box to height: auto (the default value), either by overriding or removing the height: 80px declaration from above, it then stretches to the height of the float:
This happens to be new in CSS2.1 as well, in that an element with height: auto that generates a new block formatting context (i.e. a block formatting context root) will stretch vertically to the height of its floats, and not just enough to contain its in-flow content unlike a regular box. The changes are documented here and here. The change leading to the side-effect of shrinking the box so that it does not intersect the float is documented here.
In both of these cases, no matter what you do to the second box, it will never be affected by the float because it has been restricted by the bounds of its container.
I know this will be a speculative answer, however after reading the specifications a few times here is my view on this:
What section 9.4.1 is talking about is any block element that does not fully contain or does not fill the containment space. For example when you float an element it is no longer filling 100% of the parent, like in-flow elements do. Inline blocks, table cells, and table captions are also elements that you can affect height and width but that are not intrinsically 100% of the parent (yes table>tr>td is one that would fill 100% of it's parent but it is designed to allow for multiple td's so the td doesn't count as it will automatically shrink to accommodate additional td's) this also applies to any overflow other than visible because it breaks the containment of the block element.
So if I am reading this correctly the way it works is the 9.4.1 section is referring to block elements that break the default containment rules of the block elements as specified by section 9.2.1
How do I make elements draggable between two divs? This seems to be something that draggables should do. But I haven't been able with the code I have. In this jsfiddle I have two divs with draggable elements. I want to get one element to go from the first div to the second div. That functionality must exist on many web sites.
Here is the jsfiddle with the code.
http://jsfiddle.net/gkvgn/9/
I have asked before and thought that someone would know how to have that functionality. If the code I have isn't the right way, how do I define an element and the draggable containment option to be able to have that functionality.
There's a similar Stack Overflow question that was answered here:
jquery ui draggable elements not 'draggable' outside of scrolling div
I implemented the above solution on my own project and it worked beautifully.
I agree that it does seem like if you set the containment to window or document, cross-div dragging should be allowed. I imagine that you'd prefer overflow to stay hidden due to the amount of content you want to keep in your divs.
Finally found the problem. Specifying overflow: hidden; for the container div restricts the draggable area to the container only. If I remove that specification from the styles. The elements are draggable across the divs. Here is the fiddle with the fix.
http://jsfiddle.net/gkvgn/10/
I could drag draggables from a scrollable div into a different non-parent when I stopped trying to use jquery. I ended up using https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
I'm using stylish to modify a website and I have this div full of text the needs to be moved upwards. The problem is the surrounding div has overflow-y:hidden to prevent text from flowing down the page. How can I allow overflow up but not down.
P.S. I know the css properties I used in the title don't exist, although if they did the style would already be done.
I needed to same, I found out you can just use clip, it's a very handy css property that isn't very much known. It does exactly what you want, you can shape the dimension of a div to your liking. With clip you for example can do something like
<div id="myBox" style="clip: rect(10px 100px 100px 10px);">This is some text to play with so you can see it is clipped.</div>
So I've spent a significant amount of time coding and designing this webpage, and it works perfectly in every browser I've tested it in: IE7, IE9, Firefox, Chrome, Safari. But when I view the webpage in IE8 (and only IE8), the vertical scroll is disabled. The scroll bar is there all right, but it's turned off and I can't use it or the mouse scroll wheel.
I'll post the code for the webpage if I absolutely have to, but first I wanted to see if anyone had ever heard of this happening before or had any initial thoughts.
Okay, I figured this out. If you put height: "100%"; in the html tag of your page's CSS stylesheet, it will break scrolling in IE8, but other browsers will still work. Go figure.
Here is a hack way of getting the scrollbar to work with a height of 100%. Not the best solution but it now scrolls in IE8.
html {
overflow-y: hidden\9;
}
html, body {
height: 100%\9;
}
body {
overflow-y: scroll\9;
}
mainly three things you should see
If you have given style as overflow:hidden
If you have given hight in page percentage.
if you have given float:static.
Fix this issue your IE 8 problem will be solved.
Reason : IE 8 is different than nything else for CBC check IE frist! To the topic, IE 8 hides (only scrolling bar) of scroll bar if you have overflow as hidden, secoundly if you have places hight as 100% IE 8 takes overflow as hidden (can say takes by its own!) n float is element who can go beyond page size if you have it as inherit or relative but static dose not increase dynamicly.
You tried on other IE8 (not your local ie8)? Maybe the problem is in your ie8.
Run with no-addon mode or try to disable all addons (including bars)
Restore advanced settings. Tools -> Internet Options -> Advanced -> Restore Advanced options.
I have also faced this type of problem many times.Scroll bar with IE8 , should not visible in a plain HTML page. So, please check the content inside your <body></body> tag . There may be is some margin or padding tag.
I am using IE8 currently , but there is no such scroll bar is showing. No need to fix the height:100% for HTML or BODY. Please check your page deeply.
If you are using CSS, it may come in handy that you need a reset CSS value so that the page renders properly in IE8. I have provided the link as well as the snippet from http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ . This may help you. If anything this is a nice site to read if you are starting development.
A reset to where it all started…
The concept of CSS Reset was first discussed formally way back when dinosaurs still roamed the internet (2004 to be exact) by Andrew Krespanis. In his article, he suggests using the universal selector (*) at the beginning of your CSS file to select all elements and give them 0 values for margin and padding, like so:
* {
margin: 0;
padding: 0;
}
The universal selector acts like a wildcard search, similar to regular expression matching in programming. Since in this case, the * isn’t preceded by another selector, all elements (in theory – some browsers don’t fully support it) is a match and therefore all margins and paddings of all elements are removed (so we avoid the spacing differences shown in Example 1).
Applying the universal selector margin/padding reset to our earlier example, we now remove all inconsistent spacing between all browsers (in other words, we don’t make the browsers think for us, we show them who’s boss).
Example 2: Applying the universal selector margin/padding reset
But now we don’t have any spacing in between paragraphs, so somewhere below our universal selector reset, we’ll declare the way we want our paragraphs to look like. You can do it a number of ways – you can put margins (or padding) at the beginning or top of your paragraphs, or both. You can use ems as your units or pixels or percentages.
What’s important is that we choose the way the browser will render it. For our example, I chose to add margins (instead of padding) both at the top of the paragraphs and at the bottom – but that’s my choice, you may want to do it differently.
Here’s what I used:
* { margin:0; padding:0; }
p { margin:5px 0 10px 0; }
Example 3: Declaring a style rule after the universal selector.
Note: The example I used for discussion is a simplified example. If you only used paragraphs for your web pages and no other elements, you wouldn’t want to reset your margins to 0 using the universal selector only to declare a style rule right after it for your paragraph. We’ll discuss this more fully along with other best practices later on down the page.
Shortly thereafter – CSS guru Eric Meyer further built on the concept of resetting margins and paddings. In Eric Meyer’s exploration, he discusses Tanek’s work undoing default HTML styles (which he called undohtml.css) which not only resets margins and padding, but also other attributes like line-heights, font styles, and list styles (some browsers use different bullets for unordered list items).
After many iterations and refinements, we come to a wonderful solution called CSS Reset Reloaded CSS Reset, which not only makes this CSS reset method more accurate than the universal selector method by using higher specificity by naming all possible HTML tags (because the universal selector fails to apply the reset to all HTML tags), but also sets default values for troublesome elements like tables (in which the border-collapse attribute isn’t rendered consistently across browsers).
Of course, there are other methods of resetting your CSS (such as Yahoo!’s YUI Reset CSS which I currently use on Six Revisions), and you can roll your own based on your preference and project needs.
SITE: http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
NOTE: I am kind of new at this, so please bear with me.