I've a long table that needs horizantal scroll. On it's last column I've buttons that show absolute positioned tooltips on hover. When the table itself doesn't initially create scrollbar, hovering the button, and showing it's tooltip, does.
<div style="width: 400px; height: 200px; border: 1px solid red; padding: 20px; overflow-x: auto">
<div style="background-color: red; width: 100%; height: 100%; position: relative">
My table that needs a scrolling parent div, but often times fits into the screen while it's buttons are not on hover
<div style="position: absolute; width: 100px; height: 100px; background-color: green; top: 50px; left: 350px">
My table button's tooltip that appear on hover.
</div>
</div>
</div>
In the above example. It makes sense for overflow-x to do it's thing and show the absolute element for visibilty. But it doesn't make sense, when I think that an absolute element is out of normal flow therefore overflow shouldn't take account of it.
Without going down the road of toggling overflow-x visible and scroll based on the table's width, What can I do in my case? Is there any CSS solutions for an absolute element to be not accountable in an overflow scroll?
Remove left: 350px; and add right: 0;
Related
I have run into a problem that a fixed div will swallow the scrolling for the parent div, however the scrolling for the page overall still works.
This can be seen in the following plunkr:
https://plnkr.co/edit/V1gbkrbhQduRFijlsrYz
The smaller sections can all be scrolled, but when they are clicked a fixed div is added that overlays that section. This stops the scrolling within that div, however there is also a small absolutely positioned paragraph at the bottom of each section.
Even when the fixed div is applied then scrolling on the absolute position paragraph still causes the inner div to scroll.
Does anyone know of a way to get the fixed div to pass the scroll to its parent container?
As a bit of background this is related to a modal that can have content go outside the modal and require scroll, however when a menu is opened in the modal then the scrolling breaks unless your mouse is directly over the menu. The plunkr was just to demonstrate the issue.
Code in plunkr:
Html:
<div class="container">
<p tabindex="1">
Lorem ipsum...
</p>
<div class="fixedOverlay"></div>
<p class="scrollableContent">I will let you scroll..</p>
</div>
CSS:
.container {
position: relative;
border: 1px solid;
margin: 10px;
width: 400px;
max-height: 300px;
overflow: auto;
}
p:focus + .fixedOverlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index:10;
}
p:focus {
color: red;
}
.scrollableContent{
position:absolute;
margin: 10px;
width: 100px;
height: 100px;
border: 1px solid;
z-index:11;
}
Edit
Just to clarify, I want to be able to scroll even when the mouse is over the main paragraph text, however as this will be an angular directive I only have control of the styling in the fixedOverlay and scrollableContent.
To give more insight into the reason for this the fixed overlay is used to capture when a user clicks off the menu so the menu can close
I want to have a nested div appear over its parent, while the parent has overflow-y: scroll
<div id="parent"><div id="child"></div></div>
And the css:
#parent {
position: absolute;
width: 150px;
height: 150px;
background-color: green;
overflow-y: scroll;
}
#child {
position: absolute;
width: 100px;
height: 100px;
top: 70px;
background-color: red;
z-index: 2; (????)
}
Want I would like to get is the red div to actually appear over and outside the green one without activation the overflow property.
But it's just rendered over its parent, which then proceeds to overflow with the scrollbar. So it is over the parent, which it naturally is, but not outside it and I sadly can't just ditch the overflow-property. I just want to ignore it for that one element and pretty much change it to overflow: visible.
Child cant exit parent's DIV. You need to use position:absolute, or even two different parent divs.
See here: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
And here's a css trick solutions: https://css-tricks.com/almanac/properties/z/z-index/
Good luck, next time just post the code in jsFiddle.
I saw a similar post dealing with this issue, but my problem is a wee bit different.
In the issue outlined HERE, the concept is that an OUTER div be positioned relative, and the INNER div be positioned ABSOLUTE, and the overflow:hidden would be preserved.
My issue is that BOTH divs, INNER and OUTER are positioned absolute. How can I still preserve the overflow: hidden on the OUTER div?
Not sure of your question, but is that what you try to achieve?
See this jsfiddle
CSS:
#outer {
position: absolute;
top: 10px;
left: 10px;
height: 80px;
width: 50px;
overflow: hidden;
}
#inner {
position: absolute;
top: 10px;
left: 10px;
height: 50px;
width: 50px;
}
with the html:
<div id='outer'>
<div id='inner'>
// Your stuff here
</div>
</div>
position: absolute;
If you apply position: absolute; to any block element(ex: div class="inner" ), the container block( ex: div class="outer" ) can't determine the dimensions of that element.
overflow: hidden;
Applying overflow: hidden; to any element means, it detect the real dimensions of that element. If that element have given dimensions( width: 200px; height: 200px; ) Overflow: hidden; determine the dimensions of the element as 200px,200px. If the element dose not specify the dimensions, Overflow: hidden determine the area of total ingredients as the dimensions of that element.
So in your case, You would apply a fixed width and a fixed height to your outer block. Otherwise you can't apply both overflow hidden, and position absolute to outter block in the same time.
If it is not possible to applying fixed width and height, css hs small tricks depending on the design. If you might explain the design more, I may explain more.
I have the following code:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>
Screenshot:
Why does the div gets pushed outside of the viewing area and hence showing the scrollbars. If you check toward the top right corner, the black area is the extension when the red div moved.
How can I edit it so the red div has the top and the left position but doesn't extend beyond the page width and height?
To actually answer the "why" of the question:
The reason you're getting scroll bars is that the relative positioned div inside of the absolute is set to 100% width and height, but ALSO is displaced (in this case, by top and left)
It is therefor assuming 100% width/height of the parent container AND displacing it, causing it to be too large.
By adding overflow:hidden, you seemingly solve this issue, but any content past that will be clipped, not actually fitting inside the dimensions you have set.
Another way to do this would be something like...
top: 10%;
left: 10%;
width:90%;
height:90%;
You could just as easily substitute top and left for padding/margin of that direction.
You can use CSS3's calc() function to set the second div's height and width to be the same as the first one's, minus the left and top offsets. This will also allow you to use position: absolute in your text, aligning it to the right:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
<span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
</div>
</div>
Check the working JSFiddle. I also added a CSS reset to get rid of the body margins that the browser might add. If you want to use this reset in your HTML file, create a <style> tag inside your <head> tag, with the code that is showing in the CSS section in the JSFiddle. If you don't want to use the entire reset, the only actually relevant part is body { margin: 0px; }, so you can also add style="margin: 0px;" to your body tag.
[ Screenshot ]
I have two HTML elements, one of them (the black one) is the parent of the other (the one marked with red line). The size of the child is clearly not bigger than its parent. However, its very big border is making it overflow out of its parent element, the overflow direction is to the right and bottom of the parent. Can I make it overflow to the left and top too? That'll make it appear nicer than it's currently. I've read every single CSS property and didn't find anything to control that behavior.
<div style="width: 426px; height: 611px; position: relative; background-color: black;">
<div style="position: absolute; width: 400px; height: 317px; top: 85px; left: 0px; display: block; border: 60px solid red;"></div>
</div>
I don't want to make it in the center, because it has a custom position.
JS Fiddle: http://jsfiddle.net/Ng3Pu/
you need to use CSS3
Box-sizing: Border-box;
but check the compatibility support