We have a select/combobox component and its popup picker menu cannot break out of a parent <div style="overflow: scroll; height: 100px"> element. So essentially, the picker menu is hidden especially if the combobox is located near the top or bottom of the form.
I believe the reason is because the component uses relative positioning so that the picker can be the same size as the input:
.combo {
display: block;
position: relative;
width: 100%;
z-index: 50;
}
.combo_wrapper {
position: absolute;
background-color: red;
width: 100%;
overflow: auto;
max-height: 120px;
z-index: 50;
}
For example, in the image below, the red picker should extend outside of the blue scrolling element.
Here's a simplified demo of the issue:
https://codepen.io/anon/pen/EqaMbK
If I comment out the position: relative CSS rule, then the red popup breaks out of the parent scrolling div, however the picker width then becomes the full page width.
I can solve the problem using JavaScript by setting the picker's minimum width to the combo's width:
https://codepen.io/anon/pen/QewoBR
But I was wondering if there's a pure CSS solution.
Add overflow: visible; to the parent, it will archived what you want while not break others css rules:
.scroll-panel {
overflow: visible;
}
If you remove the overflow: auto; from .scroll-panel and replace it with position: relative; it will not be contained to the parent element but still be positioned relative to it.
Related
In the context of the development of a menu, I have a fixed position div (sort of popin that contains level 3 and more menu items) which is contained by an absolute positioned div (that contains level 2 items).
Sometimes the absolute div has a scrollbar and in this case this scrollbar appears above the fixed div on Google Chrome (this doesn't happen on FF and IE).
Simplified jsfiddle example
.level-1 {
background: red;
height: 150px;
width: 200px;
position: absolute;
z-index: 1;
overflow-y: auto;
overflow-x: auto;
}
.level-1-content {
height: 200px;
}
.level-2 {
position: fixed;
left: 50px;
top: 50px;
width: 400px;
height: 200px;
z-index: 2;
background: blue;
}
<div class="level-1">
<div class="level-1-content"></div>
<div class="level-2"></div>
</div>
This issue happens only when the fixed and/or the absolute div have a z-index.
In the jsfiddle simple example, the z-index are not required, but in the context of my menu, I need them.
Does anybody know a CSS solution in order to Chrome not to display this scrollbar above the child div in this context (I mean, with my constraints, i.e. the parent div is absolute and has a z-index and the child div is fixed) ?
Thanks in advance.
I have a div with overflow hidden set up in order to cut an image:
The image on the right (the device) but it's affecting the popup on the left which MUST be there.
.hero {
position: relative;
padding: 32px 0 0;
min-height: 504px;
background: #D91A37 url(../images/flagscape-bg.jpg) 0 0/cover no-repeat;
overflow: hidden;
}
That popup already has z-index applied but it is not working due to the overflow hidden on that red background div.
So, is there a way to make that rule and not touching at all the popup on the left?
You should use position: absolute for your popup so that the properties defined on the parent are not inherited by the popup.
Your code should be something like:
.popup {
position: absolute:
top: 50px;
left: 20px;
z-index: 10;
}
And provide position: relative to a general parent above hero and popup.
I have issues with understanding the div position (relative, absolute, fixed) properties. I basically have an absolute div centered. Inside the div it should be possible to scroll vertically and horizontally. Inside this div should be a fixed header with a width larger than to screen (overflow) and a content div which has an overflow vertically and horizontally as well.
html,
body {
height: 100%;
width: 100%;
background: #fff;
margin: 0px auto;
padding: 0px auto;
position: fixed;
}
.container {
width: calc(100% - 20px);
height: calc(100% - 20px);
top: 10px;
left: 10px;
background: #2924aa;
overflow: scroll;
display: flex;
position: absolute;
z-index: 20;
}
.container-header {
width: calc(100%);
height: calc(10%);
background: #2924aa;
overflow: visible;
z-index: 10;
position: fixed;
background: red;
}
.container-body {
width: calc(110%);
height: calc(110%);
background: #2924aa;
overflow: auto;
position: absolute;
background: green;
}
<div class="container">
<div class="container-header"></div>
<div class="container-body"></div>
</div>
Here is my plunker:
https://plnkr.co/edit/wCWvHPcuYmVMql5HulHy
So i think the main question you have is in regards to the Position Attribute in CSS3. Below is a brief summary of each possible value.
CSS Positioning
The CSS positioning attribute of position has four different values.
Static - Static is the default value for position. It keeps the element on the page in its place, and it scrolls up the page as you scroll.
Relative - Relative positioning is pretty much as the same as static; however, you can use the left, right, top, and bottom attributes to alter the placement of the element relative to its original position.
Fixed - A fixed element's position is in relation to the viewport (i.e. the browser) therefore, an element with a fixed position does not scroll with the page, because when you scroll the viewport does not change. However, if you resize the browser, the element will change position.
Absolute - A element with an absolute position, is positioned relative to its parent element (i.e. the element that contains it).
A good resource for more information, including some diagrams can be found here.
I have an outer div and inside it, I have an image and another div. Now, the outer div has a certain width and height and has an overflow: hidden; Now my image works fine, meaning that even though it's bigger than the div it won't overflow.
The problem i am having is with the other div that's inside the outer div. This inner div is above the image that i have. But it still wouldn't show. But after I positioned it to absolute. It worked properly.
After that I positioned outside the barriers of the outer div. Now, since I made the overflow of the outer div hidden, it shouldn't show right? Yet, the inner div shows. So here is what I would like solved.
Why wasn't the inner div showing initially and why did i have to give the div the property of position:absolute;?
Why are is my inner div still showing outside the boundaries of my outer div even though my outer div has the property of overflow to hidden.
How do I hide my inner div when its not inside the outer div. Now, note that I do not want the inner div to actually hide. I just want it not seen unless it's in my outer div.
Here is my source code for reference:
The css property of the outer div:
.banner {
width: 250px;
height: 500px;
overflow: hidden;
float: left;
margin-right: 20px;
cursor: pointer;
}
The css property of the inner div:
div.info {
position: absolute;
width: 250px;
height: 500px;
top: 0px;
opacity: 0.70;
-webkit-transition: -webkit-transform 300ms;
}
Here is a link to a jsfiddle http://jsfiddle.net/jMX3n/2/
Found the solution. I deleted the outer div with the id of #banner. And then to the .banner class, I added position: relative and then shifted the div a little. Apparently I had multiple div's similar to the inner div I was describing. In my .banner class I added the property float:left;. The overflow worked properly. Here is the new code:
The div class:
.banner {
position: relative;
top: 100px;
left: 250px;
width: 250px;
height: 500px;
overflow: hidden;
float: left;
margin-right: 20px;
cursor: pointer;
}
The inner div:
div.info {
position: absolute;
width: 250px;
height: 500px;
top: 0px;
left: -250px;
opacity: 0.70;
-webkit-transition: -webkit-transform 300ms;
}
In the fiddle, the middle div (.banner) isn't positioned, so the absolute positioning of the inner div (.info) is with respect to the outermost div (#banner), which does have position, but does not have overflow:hidden.
Therefore, in order to hide the overflow, add overflow:hidden to the outermost div as well.
UPDATED
http://jsfiddle.net/Augustus06111993/Rkgfy/
Since no Fiddle, I am taking a shot in the dark..
Since you used absolute position it will override your overflow method because
This tells the browser that whatever is going to be positioned should
be removed from the normal flow of the document and will be placed in
an exact location on the page. It is also taken out of the normal flow
of the document - it won't affect how the elements before it or after
it in the HTML are positioned on the Web page
Your outer div and inner div have same dimensions.. Try changing the css of inner div like this and you can see your image and div seperately
.info {
width: 50%;
height: 50%;
float:left;
opacity: 0.70;
}
.image {
width:50%;
height:50%;
}
.outer {
width: 250px;
height: 500px;
overflow: hidden;
margin-right: 20px;
cursor: pointer;
}
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}