This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 6 years ago.
When I set overflow-y on a block, it seems to be affecting the overflow-x property. I've made a JSFiddle with an example of this problem. It seems to be happening in all browsers, so I think I'm missing something that should be obvious.
I have two non-overlapping blocks (blue and green) along with a third block (red) with the following requirements:
The blue and red blocks are adjacent
The red block is contained in the blue block, but it overlaps the green block
The blue block must allow vertical scrolling, but not horizontal scrolling
However, if I set overflow-x: visible so the red block overlaps to the right, instead it behaves as though I set it to scroll. However, if I remove the overflow-y property or set it to visible, the red block behaves as I expect.
I do need vertical scrolling, so I'm at a loss for what to do.
With the code below
HTML:
<div id="container">
<div id="left">
<div id="floater"></div>
</div>
<div id="right">
</div>
</div>
CSS:
#container {
height: 200px; width: 200px;
position: relative;
background-color: #ccc; border: solid 5px black;
}
#left {
position: absolute;
top: 0; left: 0; bottom: 0; width: 100px;
overflow-x: visible;
overflow-y: auto; /** REMOVING THIS CHANGES THE RESULT **/
background-color: blue;
z-index: 2;
}
#right {
position: absolute;
top: 0; right: 0; bottom: 0; width: 100px;
z-index: 1;
background-color: green;
}
#floater {
position: absolute;
right: -20px; top: 30px; height: 40px; width: 40px;
background-color: red;
}
See: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
If you are using visible for either overflow-x or overflow-y and
something other than visible for the other, the visible value is
interpreted as auto.
Related
There are multiple questions named this way, but I didn't find one that applies to my case, so here I am:
In this snippet:
#container:hover {
overflow-x: hidden;
}
#container {
position: relative;
width: 400px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
bottom: 0;
}
<div id="container">
<div id="child">
a<br/>
b<br/>
hover<br/>
me
</div>
</div>
You can see that overflow-x, which is applied when you hover the red box, will also hide the overflow-y (at least on Chrome). This is annoying because I have a tooltip that I would like to be able to overflow above the red box, and in the meantime I have a menu that will slide from the right side and that should stay hidden.
Is this a bug? Is there a workaround?
You can't change the way overflow-x and overflow-y behave (it's the same in Firefox and other browsers), but you can change the way your HTML is organized.
Put everything that you want to hide when overflowing in a single wrapper. Put your tooltip in another wrapper.
Something like this may suit your needs:
#container {
position: relative;
width: 400px;
background: #f77;
margin: 3em 2em;
}
#child {
overflow: hidden;
position: relative;
}
#menu {
position: absolute;
left: 100%;
top: 0;
background: #dd2;
transition: .2s;
}
#child:hover #menu {
transform: translateX(-100%);
}
#tooltip {
position: absolute;
bottom: 100%;
}
<div id="container">
<div id="child">
hover<br/>
me
<div id="menu">
menu
</div>
</div>
<div id="tooltip">
a<br/>
b
</div>
</div>
Is the clipping behavior a bug?
No, the clipping is in accordance with the spec.
UAs must clip the scrollable overflow area of scroll containers on the
block-start and inline-start sides of the box (thereby behaving as if
they had no scrollable overflow on that side).
In your case, the "block-start" side is the top, and the "inline-start" side is the left. That's why you can put your tooltip below the content, and it will trigger a scrollbar.
#container:hover {
overflow-x: hidden;
}
#container {
position: relative;
width: 400px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
/* bottom: 0; */
top: 0;
}
<div id="container">
<div id="child">
hover<br/>
me<br/>
a<br/>
b
</div>
</div>
So why is it possible to scroll to content overflowing below the box, but not possible to simply make it visible? The reason is that when any overflow property is set to hidden, the entire box becomes a scroll container.
[A scroll container] allows the user to scroll clipped parts of its
scrollable overflow area into view.
You can use overflow: clip, which does not turn the box into a scroll container. If you clip in both direction, you can also adjust the distance at which clipping occurs as well using overflow-clip-margin :
#container:hover {
overflow-x: clip;
}
#container {
position: relative;
width: 200px;
height: 40px;
background: red;
margin: 2em;
}
#child {
position: absolute;
bottom: 0;
}
<div id="container">
<div id="child">
aazkopekzapoekzapoekzapoekzapoekpozakepozakepozakeoza<br/>
b<br/>
hover<br/>
me
</div>
</div>
This question already has answers here:
Why is my element not sticking to the left when using position sticky in css?
(2 answers)
Why isn't position:sticky with left:0 working inside a scrollable container?
(1 answer)
Closed 3 years ago.
I'm trying to make an interface where two parts overlap, and one can scroll through the first part horizontally and the second part vertically. I quickly discovered the css sticky position.
Here is code demonstrating the issue I encountered using position: sticky; :
body {
margin: 0;
}
#d1 {
background: red;
position: sticky;
top: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
left: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
(doesn't work in my browser, here is a jsfiddle https://jsfiddle.net/2bovgy84/1/ )
If you scroll down red div stays on top (what I expect), but if you scroll right blue div gets "stuck" half-way through (but I expect it to behave like the red one does)
I do not understand this behavior, at all.
body needs to be allowed to grow wider than HTML/window's width so it doesn't drag the blue element along with it (backgrounds on html/body shows what happens : https://jsfiddle.net/Lq473pue/1/ ).
you can use for that:
display:inline-block;
display:table;
float:left;
jsfiddle updated : https://jsfiddle.net/Lq473pue/
min-width:100%; can also be handy for body
The body needs the width or you need elements that are not sticky to create that width. Otherwise your body will be the width of the viewport.
https://jsfiddle.net/y9r74c0x/20/
body {
margin: 0;
width: 2000px;
}
#d1 {
background: red;
position: sticky;
bottom: 0;
width: 2000px;
height: 50px;
opacity: 0.8;
}
#d2 {
background: blue;
position: sticky;
right: 0;
width: 50px;
height: 2000px;
opacity: 0.8;
}
<div id="d1"></div>
<div id="d2"></div>
This fiddle demonstrates a container with several elements inside of it:
<div class="container">
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element</div>
<div class="element">Element</div>
</div>
Each element has a white rectangle as a pseudo element appearing over it.
Why are they cut off at the x-axis of the container? Why is overflow-y: scroll affecting the x axis?
Brevity CSS:
.container {
position: absolute;
overflow-y: scroll;
height: 400px;
width: 200px;
border: 1px solid green;
.element {
height: 100px;
padding: 10px;
position: relative;
margin-top: 10px;
&::after {
content: '';
position: absolute;
top: -20px;
left: -30px;
width: 50px;
height: 20px;
border: 1px solid black;
background: white;
}
}
}
***UPDATE****
ok. I found out why. Here are some links:
stackoverflow
,
W3
pretty much its because if one of the x or y is set to anything other than visible... then the opposite (even visible) is automatically set to auto:
"Computed value: as specified, except with visible computing to auto if one of overflow-x or overflow-y is not visible"
JSFIDDLE
//left: -30px;
I'm not 100% on why you think its cut off. The boxes were moved to the left...so if you are asking why the left side of the boxes aren't showing their border...that is why. This fiddle has the left commented out. Please clarify if I have my understanding of your question wrong.
How can I extend background color outside div?
My code:
.content-right{
background-color: blue;
padding: 40px;
position: relative;
}
.content-right:after{
position: absolute;
top: 0;
right: calc(1px - 100%);
width: 100%;
height: 100%;
background-color: red;
content: "";
}
jsfiddle
The problem is that I'm getting scroll (horizontal) and I don't want that... What I want is that red part to be extended after that black so it reaches the edge of the screen on any resolution but without scrolling... If I add overflow: hidden, it doesn't solve the problem.
Any ideas?
Thanks.
Move the pseudo to the left, and make the width of this 1000px.
Set a shadow on it to the right, with 1000px offset, and color red
.main{
background-color: #000;
height: 500px;
}
.content-right{
background-color: blue;
padding: 10px;
position: relative;
height: 100px;
}
.content-right:after{
position: absolute;
top: 0;
right: 0px;
width: 1000px;
height: 100%;
background-color: transparent;
box-shadow: 1000px 0px red;
content: "";
z-index: -1;
}
fiddle
Note: now the pseudo element will be probably outside of bounds, but to the left. Elements going outside of bounds to the left or upper side do not generate scrollbars.
On the other side, the shadow extends to the right. But the shadow is not taking into account when computing the layout, so this won't generate scrollbars either.
Quick Fix, but essentially I made the document have a overflow-x value of hidden so it will NEVER produce a horizontal scroll bar. If this is a problem, I can try to think of a better solution, but this is what I have so far.
JSFiddle: https://jsfiddle.net/m4f4x3bt/3/
html, body{
overflow-x: hidden;
}
i've used overflow property to make the half of div that i don't want hidden , but the whole div gone.
.line {
position: relative;
overflow: hidden;
}
.gl {
position: absolute;
right: 10px;
width: 100%;
height: 5px;
background-color: green;
display: block;
}
.rl {
position: absolute;
width: 100%;
left: 30px;
height: 5px;
background-color: red;
display: block;
}
and this html code
<div class='m1'>
MAIN 1
<div class='line'><div class="rl"></div><div class='gl'></div>
</div>
<div class='des'>kasjfnkvanj</div>
</div>
i want to hide both lines green and red , only the extend part that overflows the parent div but all of them get hidden
any help?
You want hidden overflow green and red background from .line div and this time nothing is showing so you need just fixed parent div ( .line ) width and height.
.line {
position: relative;
overflow: hidden;
width:100px; height:10px;
}
You want to hide green and red background block, but want to show content from div.des. right ? you can do display:none to those div. and if don't want that you can hide them by removing height. If I am understanding this right.
height:0;
check this fiddle.