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/
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>
I have 3 divs on top of each other having following css.
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: absolute;
left: 83px;
}
and the divs that have classes are as follows:
<div class="d1">
<div class="d2">
<div class="d3">text</div>
</div>
</div>
and as a result I see content of d3 cut off because of overflow:hidden in d1.
How can I avoid cut off content of d3 without modifying d1?
Getting around the overflow..
An element can overflow from a relative or absolute positioned parent by setting its position to fixed. An element that has position: fixed will have the default left,right,top, and bottom styles set as auto. This will position .d3 to the top-left of .d2, and then the left: 83px style will push it to the left from there.
Making up the additional space..
However, to get that additional movement to the right as the original markup, you will need to add margin-left: 8px, which will make-up the additional ~8px needed to replicate the original. Further adjustments to the position of .d3 will need to be done by setting the margin style (see below).
Your updated code should look like this..
.d1 {
position: relative;
background-color: yellow;
height: 50px;
width: 100px;
overflow: hidden;
}
.d2 {
position: absolute;
background-color: green;
height: 25px;
width: 50px;
}
.d3 {
position: fixed;
margin-left: 8px;
left: 83px;
}
Some considerations and caveats..
As a previous commenter mentioned, best practice would be to fix your html markup because this solution could cause issues if you ever need to move the position of .d3. For example, setting left,right,top, or bottom will cause the default setting of this style, auto, from being unset, and the element will be positioned relative to the viewport rather than the parent relative or absolute element.
I am experiencing some trouble while positioning an absolute div inside a relative one. I want my absolute div (inline-block) to grow until it reaches a given px-amount (max-width). This works as expected, until I add a width (smaller than the max-width of the absolutes div) to the relative div.
I want the text in the absolute-div to break at the max-width (400px) and not at the edge of the relative parent div (300px).
When giving white-space: nowrap, the words just flow over the absolute divs end.
Have anyone an idea how to solve this?
Thanks!
See:
http://codepen.io/anon/pen/KVJvmZ
html
<div class="relativeContainer">
<div class="absoluteContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
css
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
I am afraid it is not possible to solve this issue with your markup. But there is light at the end of the tunnel: You could change your markup or use javascript to achieve what you want.
Depending on your requirements, this could help you: http://codepen.io/anon/pen/eJXYOJ
html
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
<div class="contentContainer">
This should stay small.
</div>
</div>
</div>
css
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
position: absolute;
width: 100vw; /* do a large number of px for ie8 compatibility*/
top: 0;
left: 0;
background-color: lightgray; /* just to show you what I've done*/
}
.contentContainer {
display: inline-block;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
Absolute container is directly related to the relative parent container.
There is no way to make an absolute container bigger (width or height) than a relative parent container.
If you want an absolute container bigger (width or height) than his parent the parent should not be relative.
Hope this help.
Have a good one
I don't think what you want to do is possible without using another class, or using JS. Here's how you can do it with css:
<div class="relativeContainer">
<div class="absoluteContainer bigger">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
.absoluteContainer.bigger{
width: 400px;
}
I have looked at your example and I don't think you can do what you want if the absolute is inside the relative and you don't specify a width. Currently, with only a max-width, the inner absoluteContainer has no reason to go outside the relative container so it won't. Once you set a width, you get what you want but the small cannot stay small! You might be able to 'spoof' what you want by locating the absolute outside the relative but in the same location. This gives you something of what you want - but it won't (say) scroll the relative one if the absolute is bigger.
Example at: http://codepen.io/anon/pen/Nxovey
If you don't want to (or can't) identify longer text in CSS with extra classes then this is the best you can do without javascript.
Code:
<div class="spoofContainer">
<div class="absoluteContainer">
Hello you! This breaks on relativeContainers edge.. This is not what i want. It should just go further an further (until it reaches max-width of 400px).
</div>
</div>
<div class="relativeContainer">
</div>
<div class="spoofContainer">
<div class="absoluteContainer">
This should stay small.
</div>
</div>
<div class="relativeContainer">
</div>
CSS:
.spoofContainer {
width: 400px;
height: 0px;
overflow: visible;
position: relative;
}
.relativeContainer {
width: 300px;
height: 100px;
border: 1px solid black;
position: relative;
margin-bottom: 50px;
}
.absoluteContainer {
display: inline-block;
position: absolute;
top: 0;
left: 0;
max-width: 400px; /* Word-break should happen here. */
border: 1px solid red;
}
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.
I have this container which can scroll the content. I would like the header in this container to always stay in the top.
http://jsfiddle.net/z9ze5/
Container:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
overflow: scroll;
position: relative;
}
Header:
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: absolute;
margin: 0;
background: #DDD;
z-index: 999;
}
If you are willing to alter your mark-up, here is one way of doing it:
<div class="lists">
<header class="box_header">
<h1>HEADER 2</h1>
<div class="setting" id="btn2"></div>
</header>
<section class="content">
<p>Lorem Ipsum ....</p>
</section>
</div>
Wrap your scroll area in a <section> (or other block level element).
For your CSS:
.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}
Please see fiddle: http://jsfiddle.net/audetwebdesign/nGGXx/
More Advanced Example
If you study the following example:
http://jsfiddle.net/audetwebdesign/fBNTP/
uou can see how your scrolling boxes could be applied in a semi-flexible layout.
I lined up two scrolling boxes side by side and made their width proportionate to the width of the page.
The height is trickier to adjust. I fixed the height of the parent container, see the following rule:
.contentWrapper {
border: 1px solid red;
margin-top: 1.00em;
padding: 30px 0;
overflow: auto;
height: 400px;
}
If you change the height from 400px to some other value, the scrolling boxes will adjust themselves.
Hopefully, these examples will give you and others some more insights into how to build these more advanced layout designs.
If you want a non-css fix, add this listener...
$('.lists').scroll(function() {
$('.box_header', this).css('top', $(this).scrollTop()+'px');
});
and then change .lists css to give relative positioning
.box_header {
width: 100%;
height:30px;
overflow:hidden;
position: relative;
margin: 0;
background: #DDD;
z-index: 999;
}
Any position absolute within a position relative is absolute to the relative container. In order to have a header that stays in position, you'd need to position it above, not within, the scrolling container.
look at adding position: fixed to your header div .box_header. You may have to add padding of the height of the box header div to section.content but as you have that set to 30px that should be fine. IE6 and lower has issues with fixed positioning but hopefully we can live with that now - less people are using that than are still listening to Moby.