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.
Related
I have tried a lot of things and searched online but I cannot figure out the solution to this problem.
I have a div container which has a max-height, min-height and also overflow: auto. When the inner content is larger than the max-height, a scrollbar appears as expected. But, inside the content there is a dropdown, which when clicked, the menu expands, and instead of being displayed outside the parent container, it is like changing the inner content height.
The only solution I found online and made sense to me, is to wrap the container to div with relative positioning and make the dropdown absolute, but there is a big drawback now, the dropdown stays fixed on scroll, as it is absolute positioned relative to the wrapper and not the content. Is there any common way to fix this or any other solution ?
I didn't post any code because I do not want the answer to rely on my code.
I just want a minimal example if possible with these properties:
Container has a max-height
If content is larger than the container's max-height then the container should display a scrollbar.
The content has a dropdown which should scroll with every other element of the content.
The menu options of the dropdown element are escaping the container / are displayed outside the boundaries of the container.
To illustrate on my comments on the question, here's an MCVE:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
position: relative;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
left: 300px;
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
As you can see, with absolute positioning based on the relative position of div.content the orange div.dropdown creates a horizontal overflow, which is what you don't want. To fix this scenario, you need to remove position: relative from div.content and use transform: translateX(300px); instead of left: 300px;:
.scroll-container {
border: 3px dashed #eee;
height: 400px;
padding: 10px;
overflow: auto;
width: 400px;
}
.content {
background-color: #f0f0f0;
height: 600px;
}
.dropdown {
background-color: orange;
position: absolute;
height: 300px;
width: 300px;
transform: translateX(300px);
}
<div class="scroll-container">
<div class="content">
<div class="dropdown"></div>
</div>
</div>
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>
jsfiddle:
https://jsfiddle.net/zem4c7wf/
So what I'm trying to do is have a text element with a short width restriction, like it existed within a left pane. (.under & width: 160px in this example)
When you hover over it, another text element will display over it (.over & width: 300px). However, the .over text element does not respect the width I gave it, and instead is going off of it's parent width (.under)
I tried using a z-index and position: absolute, but I can't get the hover text to display fully.
Any help would be greatly appreciated! Thank you!
Note: I can't get JSFiddle to mimic the behavior I'm seeing on my site, but when trying to make the overflow visible, it just adds a horizontal scrollbar rather than bringing the hover text completely to the forefront. (Hover text is the black line)
You can fix this by adding overflow: visible; when the .under div is hovered.
CSS
.under:hover {
overflow: visible;
}
.under {
width: 160px;
white-space: nowrap;
position: relative;
overflow: hidden;
}
.over {
visibility: hidden;
background-color: black;
color: #fff;
border-radius: 6px;
padding: 5px 0;
position: absolute;
top: -5px;
left: 0%;
z-index: 1;
width: 300px;
}
.under:hover {
overflow: visible;
}
.under:hover .over {
visibility: visible;
}
<div class="under">
Something long and cut off
<span class="over">
Something long and NOT cut off
</span>
</div>
JSFiddle
just remove the overflow: hidden from the class ".under"
I have a problem where a div tag that is supposed to show on hover is hidden behind an image. This is how it looks:
I tried to remake it with jsfiddle: http://jsfiddle.net/Gwxyk/21/
I tried position relative also on '.image-options' but did not turn out right. Also how do i float the small orange box to the right side? I tried float: right; but it did not respond.
Help would be appritiated.
Some arbitrary code since stackoverflow asks for it (its in jsfiddle):
.image-options {
float: right;
}
I'm struggling to understand exactly what you require to happen. However have you tried using the z-index property? Both the div and the image will need to be positioned relatively or absolutely, then apply a higher z-index to the element that you want to appear in front. So you could apply z-index: 1 to the image and z-index: 100 to the div.
Is this what you are expecting?
Add top:0 to .image-options and interchange the place of image and inner div.
DEMO
Here you go, i think this will help you out.
http://jsfiddle.net/dmP2x/
You dont have to do this with jQuery, use CSS as much as you can to tidy up your code.
css:
.testclass {
width: 105px;
height: 80px;
overflow: hidden;
display: inline-block;
border: 2px solid rgba(140,140,140,1);
}
.image-options {
width: 10px;
height: 10px;
border: 2px solid rgba(255,128,64,1);
position: absolute;
top: 10px;
left: 25px;
overflow: none;
display: none;
}
.image {
background-image: url('http://www.placehold.it/105X80');
width: 105px;
height: 80px;
position: relative;
}
.image:hover .image-options {
display: block;
}
html:
<div class="testclass">
<div class="image">
<div class="image-options"></div>
</div>
</div>
http://jsfiddle.net/waitinforatrain/sEX3n/
I have two divs in a container with absolute position. Both of them are set to be outside the boundaries of the container. If I uncomment the overflow: hidden line it will hide everything outside the container.
However, I only want div1's overflow to be hidden, and div2's to be visible. But because overflow:hidden has to be set in the parent, it will hide both of them. Is there any way to hide one?
Even if I could get it so that it shows overflow at the top and bottom boundaries but not at left and right that would suit (I tried messing with overflow-x and overflow-y but I gather that that's not their intended purpose).
<div id="container">
<div id="div1"></div>
<div id="div2">Test</div>
</div>
#container {
width: 300px;
position: relative;
border: 1px solid #000;
height: 10px;
/*overflow: hidden;*/
}
#div2 {
position: absolute;
top: 16px;
border: 1px solid #444;
}
#div1 {
position: absolute;
height: 10px;
left: 90%;
width: 15%;
background-color: purple;
}
The most obvious solution is to:
Add an extra wrapper div.
Apply overflow: hidden to this div.
Move the time outside this div.
Like this: http://jsfiddle.net/sEX3n/4/
Why not just move div#time outside the div#video-seek ?
Like this : http://jsfiddle.net/moeishaa/XNAmn/