I have a div menu which has a fixed size (e.g. 100% of the height). The content could be larger. Then it would have to scroll.
div {
overflow-y: auto;
width: 10%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
There is also an :after element on the div which is positioned absolutely right outside the div.
div::after {
content: "";
position: absolute;
left: 10%;
top: 45%;
height: 10%;
width: 5%;
}
The problem is that once I add the overflow auto to the div the after element is hidden. How do I get a scrollbar AND have the after element outside the div?
Found some similar questions but none of the solutions seem to work for me.
I solved this for now by simply adding another div inside the original one
div.original div.inside {
overflow-y: auto;
position: relative;
width: 100%;
height: 100;
}
and remove the overflow from the original div. You need one more div, but this seems to be the easiest and cleanest solution.
Related
I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
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 want to be able to display a DIV in a fixed position and have its width fit to content but each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
HTML:
<div class='veil'></div>
CSS:
.veil{
display: inline-block;
position: fixed;
top: 34%;
left: 0;
right: 0;
margin: 0 auto;
background-color: lavender;
}
each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
It's not display: block, it's position: fixed makes div stretch relatively to browser window, and since you have left: 0 and right: 0 you observe this behavior that div takes all window width.
Depending on your HTML structure you can use position: absolute instead or as pointed in comments (thanks #Paulie_D) don't use right: 0.
Just add another container.
and split the contradiction in CSS between them.
HTML:
<div class='container'><div class='veil'></div></div>
CSS:
.container
{
position: fixed;
top: 34%;
left: 0;
right: 0;
}
.veil
{
display: inline-block;
margin: 0 auto;
background-color: lavender;
}
Given an absolutely positioned element with a certain size and overflow:auto and a child element that is also absolutely positioned, anchored to the bottom left corner of the parent element and exceeding it in size, like this:
#container {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
overflow: auto;
}
#content {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 200%;
}
Why does no vertical scrollbar appear on the parent element?
When I change the positioning of the child element to top instead of bottom, the scrollbar appears. It seems like the scrollbar is only visible if the content overflows on the bottom edge of the parent element. Why is this the case?
Here is the link to a JSFiddle that demonstrates the issue: http://jsfiddle.net/qGsd3/14/
I was hoping for a more interesting answer, but it seems to be: "Because the spec says so."
EDIT: I just realized that isn't the right section... But luckily I found the correct one so the answer stands.
http://www.w3.org/TR/2007/WD-css3-box-20070809/#abs-non-replaced-width
At the bottom there are the rules that dictate when height is calculated and how and it states only when there is overflow on the bottom does it extend the height. There is more reading there about how this affects overflow, so just poke around.
Absolute elements don't take up any space, that's why. Absolute positioning isn't needed for your content, change it to static, I can't understand what you are trying to accomplish there...
In my experience, nesting an absolute position inside another absolute position has given me nothing but headaches. Also, for heights, percentages can be hit or miss depending on the browser. Take a look here to see what I did on the 'bad' class to display the overflow.
#container {
position: relative;
width: 100px;
height: 100px;
overflow: auto;
background: green;
text-align: right;
top: 100px;
}
.left {
left: 100px;
}
.right {
left: 300px;
}
#content {
position: absolute;
width: 50%;
height: 100px;
background: red;
}
.good {
top: 0;
left: 0;
}
.bad {
bottom: -20px;
left: 0;
}
http://jsfiddle.net/qGsd3/39/
What I need is put the content of a DIV, to overflow (I don't if this is the correct word) to left and top, and KEEP the DIV sizes always fixed. Here is an image I made:
The normal result, is the DIV become 70x76 (the size of its content), but i need to keep DIV's size FIXED.
Any suggestions?
If I understand your question correctly, this CSS should do the trick:
#myDiv {
width: 43px;
height: 43px;
position: relative;
overflow: hidden;
}
#myDiv img {
position: absolute;
bottom: 0;
right: 0;
width: 73px;
height: 70px;
}
You can see an example here: http://jsfiddle.net/sZ4AC/
or here: http://jsbin.com/arobuz/2/