We have a modal with position: fixed and overflow-y: auto.
This works well when we have lots of components that overflow since then the scroll bar is shown.
However when we have a custom calendar field inside the modal which opens a popup/dropdown calendar and that element is outside one of the sides of the container, it's not shown.
Is there a way to make the popup/dropdown shown while keeping the overflow-y: auto of the modal? Like so:
Codepen to elaborate: http://codepen.io/anon/pen/jWmNMa
.modal {
position: fixed;
background-color: pink;
height: 200px;
width: 200px;
left: 30%;
/* comment out this to show dropdown*/
overflow: auto;
}
.dropdown {
background-color: lime;
height: 80px;
width: 80px;
position: absolute;
left: -50px;
}
html:
<div class="modal">
<div class="dropdown">
This is content in a dropdown.
</div>
Long long overflowing text...
</div>
In your case, it's not possible for an absolutely positioned child element to appear outside of the parent .modal element when it has overflow: auto set on it (unless you set the position of the .dropdown element to fixed).
The easiest work-around would be to wrap the text and other contents, and then set overflow: auto on that element. For instance, you could wrap it with a .content element, and then set height: 100% and overflow: auto in order to add a scrollbar and hide the overflow for those specific elements.
Updated Example
<div class="modal">
<div class="dropdown">
This is content in a dropdown.
</div>
<div class="content">...</div>
</div>
.modal {
position: fixed;
background-color: pink;
height: 200px;
width: 200px;
left: 30%;
}
.modal .content {
height: 100%;
overflow: auto;
}
This worked for me.
Of course, you're limited by the inconvenient effect of position:fixed; but this does achieve your desired result.
.dropdown {
background-color: lime;
height: 80px;
width: 80px;
position: fixed;
margin-left:-50px;
}
Hope that helps.
Related
[I want to make my work look like this][1]
[But my work is now like this][2]
The vertical grey line is the web border, all other divs' width would not exceed that line.
Now users might drag and see the rest of the image. It would be much better if the exceeded part of the image is hidden.
So here is my code:
html:
<div class="container-div">
<img class="the-img" src="image.png" alt="">
</div>
css:
.container-div {
text-align: right;
position: relative;
}
.the-img {
position: absolute;
overflow: hidden;
width: 100%;
height: auto;
margin-top: 1vh;
margin-left: -75.5vw;
}
Also, all the parent div of .container-div in my exact code are already position: relative;
How do I fix this? Thanks!
[1]: https://i.stack.imgur.com/glA2q.png
[2]: https://i.stack.imgur.com/LcBpO.png
Have you tried adding overflow: hidden on the .container-div?
You definitely should put overflow: hidden on the parent element.
Then you should set a height to it, your browser can't set a correct height on the parent element because its child doesn't have any (because of absolute position).
.container-div {
text-align: right;
position: relative;
overflow: hidden;
height:200px;
}
.the-img {
position: absolute;
width: 100%;
height: auto;
margin-top: 1vh;
margin-left: -75.5vw;
}
Eg. how can you get the blue child in this example to be horizontally centered relative to the viewport (ie. in the center of the page), provided that the parent must stay the same.
Other qualifications:
I don't want it to be fixed.
Suppose that distance between the parent and the left viewport is unknown.
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: absolute;
bottom: 100%;
}
<div class="parent">
<div class="child">
child
</div>
</div>
I am trying to make this question a SSCCE. In reality, the use case is that I have a dropup (like dropdown, expect it appears above rather than below the triggering button). I want the dropup menu to be centered.
The menu needs to be absolutely positioned, otherwise it'd get in the way of the flow of other DOM elements. And I need to position the container so that I could set bottom: 100%; on the menu so that it appears right above the triggering button.
In in this case you can use position:fixed BUT to avoid it being fixed apply a null transform to the body:
body {
transform:translate(0,0);
min-height:150vh;
}
.parent {
margin-left: 100px;
margin-top: 100px;
background: red;
position: relative;
width: 50px;
height: 50px;
}
.child {
background: blue;
position: fixed;
left:50%;
transform:translate(-50%,-100%);
}
<div class="parent">
<div class="child">
child
</div>
</div>
I currently get the parents div height with: height: inherit;, but when I scale the window down then the parent div is smaller than the container div so overflow: hidden; hides half of the container content.
Is it possible to just do this with css?
This is the code:
<div id="container">
<div class="content">
<div class="wrapper">
Content here
</div>
</div>
#container {
float: left;
height: 400px;
width: 400px;
background-color: red;
}
.content {
float: left;
height: inherit;
width: 90%;
overflow: hidden;
position: relative;
background-color: black;
}
.wrapper {
width: 90%;
height: 900px;
position: relative;
z-index: 99;
background-color: blue;
}
http://jsfiddle.net/orymyjto/1/
You probably use the overflow property to clear the floats, right?
Then change overflow: hidden to overflow: auto.
Set the content div min-height: 400px; (replacing height) So it will never be smaller than the container but can get larger as necessary.
I have 2 columns 50% width each. Inside each column I have overflown content positioned absolutely relative to body.
<div class='column left'>
<div class='inner'><h1>Pink</h1></div>
</div>
<div class='column right '>
<div class='inner'><h1>Blue</h1></div>
</div>
I need the inner divs to be hidden. How do I do that? Setting overflow:hidden on .column has no effect on inner divs. Fiddle HERE
PS. The idea is to animate the width of the columns and show the inner content. This fiddle illustrates what i am trying to achieve (but it is using vh, vw that I cannot use due to browser requirement)
html, body {
width :100%;
height: 100%;
position: relative;
}
.column {
float: left;
width: 50%;
height: 100%;
overflow: hidden; /*has no effect*/
}
.inner {
position: absolute;
top: 50%;
width: 100px;
}
.left .inner {
right: 20px;
text-align: right;
}
.right .inner {
left: 20px;
text-align: left;
}
Are you simply looking for
visibility: hidden;
or
display: none;
This last one removes the element from the DOM.
I have a div inside a div, the child both being centered in its parent and bigger than the parent making it overflow equally on both sides of it. The child has another div inside it with some text.
<div class="outer">
<div class="inner">
<div class="text">
testing testing
</div>
</div>
</div>
css:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
}
.text
{
margin-left: auto;
margin-right: auto;
width: 400px;
}
http://jsfiddle.net/msVVD/4/
Now, if the document width is narrowed by resizing the browser window, or in the jsfiddle case, resized by dragging the handle between "JavaScript" and "Result", the text will not stay on the same horizontal position, but "travel" to the right.
Why?
You need to set a min-width to the body (or parent container in which the absolutely positioned element is aligned according to) like so
body
{
min-width: 600px;
}
This will prevent the absolutely positioned from traveling
FIDDLE
You are not positioning the .inner element relatively to the .outer one. Add position: relative to .outer.
Changes in your CSS:
.outer
{
width: 400px;
height: 400px;
background: beige;
margin: 0 auto;
position: relative;
}
.inner
{
width: 600px;
height: 200px;
background: pink;
position: absolute;
left:0;right:0;
margin: auto;
margin-left: -100px;
padding-left: 100px;
}
Fiddle: http://jsfiddle.net/msVVD/7/