I am trying to add a overflow scroll to jQueryUI draggable and resizable elements. Due to bug in jQuery UI, all resizable elements are absolute positioned by default and overflow does not work.
HTML
<div class="container">
<div class="object" style="top:10px;"></div>
<div class="object" style="top:20px;"></div>
<div class="object" style="top:30px;"></div>
<div class="object" style="top:40px;"></div>
<div class="object" style="top:50px;"></div>
</div>
CSS
.container{
width: 100%;
height: 40px;
background-color:#000000;
top:0px;
overflow:scroll;
}
.object{
position:absolute;
height:5px;
background-color: #AAAAAA;
left:100px;
width:50px;
}
Is it possible to add overflow scroll to container with absolute positioned divs?
jsfiddle
Yes, you can, use position: relative; on the parent container
Demo
Demo 2
.container{
width: 100%;
height: 40px;
background-color:#000000;
top:0px;
overflow:scroll;
position: relative;
}
Related
I have an image inside a DIV.
I want to "overhang" the image outside the DIV a little, so I've positioned it absolute and the parent container as relative. When I do that, the parent DIV no longer resizes its height to contain the image.
How can I do this?
the HTML
<div class=".twelve.columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
the CSS
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;
width:100%;
border:1pt solid pink;
}
JSFiddle
Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions of their parents.
If you really had to achieve this affect while keeping the children as position: absolute, you could do so with JavaScript [...]
To get the effect described without javascript, you could use negative values for bottom or top. I also updated your JSFiddle for your concrete example.
.ssImg{
width:100%;
}
.clr{
clear:both;
}
#header{
margin-top:0;
background:#000;
position:relative;a
width:100%;
border:1pt solid pink;
}
#logoWrapper{
width:15%;
min-width:120px;
margin-left:10px;
position:relative; /* this is new */
bottom: -40px; /* this is new */
}
<div class="twelve columns" id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
<div class="clr"></div>
</div>
</div>
How about this?
html, body {
height: 100%;
padding: 20px;
}
.ssImg{
width: 100%;
}
#header{
background-color: #000;
position: relative;
width: 100%;
height: 100%; /* Set the height what you want */
border: 1pt solid pink;
}
#logoWrapper{
width: 15%;
min-width: 120px;
position: absolute;
top: -15px;
left: -25px;
}
<div id="header">
<div id="logoWrapper">
<img src="https://nbson.com/sni/images/logo.png" class="ssImg">
</div>
</div>
First of all:
If you want to put two classes on an element use like <div class="twelve columns">, not like <div class=".twelve.columns">
Secondly, regarding your question:
Absolutely positioned elements are removed from the flow and thus, no longer taken into consideration when it comes to calculating dimensions for the parent element.
You can solve it by explicitly setting the height and width you need on the element.
I am new to bootstrap and web development. I wanted to make a responsive div which always maintains a length to width ratio of 16:9. With a header and footer section above this responsive portion. But the header and footer sections are stacked up on each other. Any help would be appreciated.
html
<div class="post-card-outer">
<div class="post-card-inner">
<div class="space-header">
</div>
<div class=" post-content">
<div class="col-sm-6 content-leftcol">
<div class="image-sec-post-card">
<img class = "image-post-card" src="3.jpeg">
</div>
</div>
<div class="col-sm-6 content-rightcol">
right
</div>
</div>
<div class="space-footer">
GGDYGDYGDYGDYGYDGDGYD
</div>
</div><!--post-card-inner-->
</div><!--post-card-outer-->
css
.post-card-outer{
width: 100%;
padding-bottom: 56.25%; /* 16:9= 56.25 %; 4:3 = 75%*/
position: relative;
background: coral;
margin-top:50px;
}
.post-card-inner{
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.space-header {margin-top:-10px; height:10px; background-color:red;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;}
.post-content{
min-height:100%; background-color:green;
position:absolute;
top: 0; bottom: 0; left: 0; right: 0;
}
.content-leftcol{
background-color:black;
width:50%;
height:100%;
}
.content-rightcol{
background-color:blue;
width:50%;
}
.image-sec-post-card{
border:1px solid white;
vertical-align: middle;
overflow: hidden;
}
.image-post-card{
max-width:100%;
max-height:100%;
border:1px solid green;
}
Well if your header is meant to be at the very top and your footer is meant to be at the very bottom of the page/element then youR could use absolute or fixed positioning.
When you use absolute positioning the element is automatically set to the top-left of the window/element. You can think of it as a (0,0) positioning on a grid. Once you tell the element to be positioned absolutely you can use the TOP, RIGHT, BOTTOM, and LEFT properties. These properties directly influence the origin of your element. For example Top:0 will place your element at the very top of the window and Bottom:0 will place your element at the very bottom of the window. If you wanted to put a little space in between the element and the side of the window then you could simply increase the number. Top:20px or Top:2vh
Fixed positioning is nearly the same except your element will be static and wont move even if you try to scroll up or down. This is how you achieve fixed navigation bars and fixed footers.
.space-header {margin-top:-10px; height:10px; background-color:red;top:0;position:absolute;}
.space-footer {margin-bottom:-10px; height:10px; background-color:red;color:white;bottom:0;position:absolute;}
body{ margin:0; padding:0; color:#fff;} .space-header {height:50px; background-color:red;} .space-footer {height:50px; background-color:red;color:white;} .post-content{min-height:100%; background-color:green;} .content-leftcol{background-color:black;width:50%;height:47vw; float:left;} .content-rightcol{background-color:blue;width:50%;height:47vw; float:left;} .image-sec-post-card{border:1px solid white;vertical-align: middle;overflow: hidden;}.image-post-card{max-width:100%; max-height:100%; border:1px solid green;} .clearfix{clear:both; float:none;}
<body><div class="space-header">Header
</div>
<div class="clearfix"></div>
<div class=" post-content">
<div class="col-sm-6 content-leftcol">
<div class="image-sec-post-card">
<img class = "image-post-card" src="3.jpeg">Left
</div>
</div>
<div class="col-sm-6 content-rightcol">
right
</div>
<div class="clearfix"></div>
<div class="space-footer">
Footer
</div>
</div> </body>
Is there any way to make the child div below override its parent max-width to stretch to 100% page width? both parent and child are absolute position
<div class="container" style="max-width:500px;position:absolute;">
<div class="content"></div>
<div class="special-content" style="position:absolute;width:100%"></div> <!--override to 100% page width? -->
<div class="content"></div>
<div class="content"></div>
<div>
also the above container is currently positioned inside another image container div set to position:relative
You could do something like this. This would force the width of the special-content container to fill the width of the window, beyond the parent container width.
JSfiddle: http://jsfiddle.net/tm752gr0/4/
HTML:
<div class="container">
<div class="content"></div>
<div class="content special-content"></div>
<div class="content"></div>
<div class="content"></div>
</div>
CSS:
.container {
max-width:500px;
margin:0 auto;
/* position:absolute; */
border:1px solid #000;
}
.special-content {
margin:0 -1000px;
padding:0 1000px;
/* position:absolute; */
width:100%;
border:1px solid #000;
}
.content {
overflow:hidden;
display:block;
border:1px solid #000;
width:100%;
}
* {
height:30px;
}
body {
overflow-x:hidden;
}
Note: I commented out the position:absolute to be able to illustrate how the concept works.
If you can use vw then try this:
Can I use
<div id="parent">
Yay!
<div id="child">ABC123</div>
</div>
#parent {
position: absolute;
max-width: 500px;
border: 1px solid gray;
}
#child {
position: absolute;
width: 100vw;
border: 1px solid yellow;
}
Fiddle for you
Please look at this JsFiddle.
JSFiddle
<div class="main" >
<div class="menufixedleft">
Fixed Menu Should not Scroll
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
I am trying to have a menu div on the left fixed, content on center and sidebar on right.
It's not working when i have the center and right side bar, float left. The center div overlays the fixed div on the left.
Is my only option is to float the 2 divs(center and right sidebar) to the right ?
Thanks !
Make room for the fixed element by giving main either padding-left:100px; or margin-left:100px depending on how you want it to look (The 100px comes from how wide the fixed element is)
Updated jsFiddle
Check out this JSFiddle: http://jsfiddle.net/J2tt6/1/
Here's the CSS code:
body {
padding: 0;
margin: 0;
}
.main{
height:500px;
width:550px;
background:pink;
position:relative;
}
.menufixedleft{
height:200px;
width:100px;
position:fixed;
left:0;
top:20px;
background:green;
}
.content{
height:400px;
width:200px;
background:blue;
position: absolute; /* should not float, as fixed elements are above everything else. */
left: 100px;
}
.rightsidebar{
height:200px;
width:100px;
background:red;
position: absolute; /* once again, don't float. */
left: 300px;
}
When you set position: fixed to your left navigation, it is taken out of the layout. To keep it in, you will need to contain your menu in another element, which remains in the layout.
HTML:
<div class="main">
<div class="menu">
<div class="affix">
Fixed Menu Should not Scroll
</div>
</div>
<div class="content">
Main Content
</div>
<div class="rightsidebar">
Right Side Bar
</div>
</div>
CSS:
.menu {
float: left;
min-height: 1px;
width: 100px;
}
.affix {
height: 200px;
width: 100px;
position: fixed;
left: 0;
top: 20px;
background: green;
}
JS Fiddle
We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.
#first {
width: 200px;
height: 200px;
background-color: green;
overflow: hidden;
}
#second {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 250px;
top: 250px;
}
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)?
Also position relative for our inner DIV isn't an option as we need to "grow out" of a table TD.
#first {
width: 200px;
height: 200px;
background-color: green;
}
#second {
width: 50px;
height: 400px;
background-color: red;
position: relative;
left: 0px;
top: 0px;
}
<table id="first">
<tr>
<td>
<div id="second"></div>
</td>
</tr>
</table>
Are there any other options?
Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.
What about position: relative for the outer div? In the example that hides the inner one. It also won't move it in its layout since you don't specify a top or left.
An absolutely positioned element is actually positioned regarding a relative parent, or the nearest found relative parent. So the element with overflow: hidden should be between relative and absolute positioned elements:
<div class="relative-parent">
<div class="hiding-parent">
<div class="child"></div>
</div>
</div>
.relative-parent {
position:relative;
}
.hiding-parent {
overflow:hidden;
}
.child {
position:absolute;
}
Make sure.
parent position relative.
parent have manually assigned width and height(important as child element having absolute position).
child position absolute;
.outer{
position:relative;
width:200px;
height:100px;
overflow:hidden;
}
.inner{
position:absolute;
width:100px;
height:100px;
font-size:3rem;
}
<div class="outer">
<div class=inner>
Inner DIV to apply overflw hidden
</div>
</div>
}
You just make divs like this:
<div style="width:100px; height: 100px; border:1px solid; overflow:hidden; ">
<br/>
<div style="position:inherit; width: 200px; height:200px; background:yellow;">
<br/>
<div style="position:absolute; width: 500px; height:50px; background:Pink; z-index: 99;">
<br/>
</div>
</div>
</div>
I hope this code will help you :)