I have a fixed height scrollable <div id="overlay"> positioned over all the page elements using position:fixed. In the div I have elements higher than the fixed height, so the scrollbar appears. I also have a tooltip that I want to stay with a paragraph even if it is scrolled.
That's what I want to happen here, but unfortunately neither of my solutions work properly:
I add position:absolute to the tooltip and position:relative to #overlay(the tooltip's parent): http://jsfiddle.net/4qTke/
The tooltip scrolls as expected but it is not visible outside of #overlay.
I only add position:absolute to the tooltip: http://jsfiddle.net/Yp6Wf/
The tooltip is visible outside of the parent #overlay but doesn't move when the div is scrolled.
I want the tooltip to always be visible AND for it to move when scrolled.
What you want is not possible using just CSS and HTML.
The main problem you have is that you have set overflow: scroll on the container your #tooltip is relative to. Because this overflow property is stopping any content from appearing outside of its edges when you position #tooltip "outside" of the div it will be hidden and only visible when scrolled to.
The reason it was visible in your second scenario is because without setting position:relative your #tooltip was relative to the page and not the container. Which meant it was not affected by the overflow:scroll property of the container.
HTML:
<div id="overlay">
<div class="elemRel">
<div class="elemAbs">
<!-- Your Code -->
</div>
</div>
</div>
CSS:
#overlay { position:fixed; }
.elemRel { position:relative; }
.elemAbs { position:absolute; }
Maybe this is an alternative for you? See demo fiddle.
Related
I've just realized that in a div with overflow-x: scroll I have a horizontal scroll bar as expected but I also have some children elements that are outside the div.
I was expecting that the scroll bar would grow/shrink to accommodate more/less of that div children elements.
You can see this effect here (you need to inspect to see hidden elements) here, where element number 1 and 2 are hidden on the left of the parent div:
Fiddle
https://jsfiddle.net/w01y50yb/
Please note that I also have inline style.
Why is that and how to fix it?
Add a outer container to the content and apply overflow-x and width to it. Check this updated fiddle
<div style="width: 100%; overflow-x: scroll;">
<!-- You content here -->
</div>
I've got a modal style div with a 'close button' in the top right hand corner.
The 'close button' div (absolute) appears above its parent div (fixed).
This works fine when the parent div has no overflow property defined.
When overflow is defined in the parent div, however, the close button gets clipped and won't appear above the parent div no matter what absolute / relative / z-index tinkering I do to the parent and child divs.
Is there anyway to get a child div to appear above a parent div which has overflow defined?
I ended up doing something like this and got the desired result:
HTML
<div id="parent">
<div id="child_close"></div>
<div id="child_scrollable_content">
<p>Put in your scrollable content here.</p>
</div>
</div>
CSS
#parent {
position:fixed;
}
#child_close {
position:absolute;
top:-20px;
right:-15px;
}
#child_scrollable_content {
overflow: auto;
}
I have a div that contains a smaller div with some text. The container div has a webkit transition that moves it off the screen. I want the smaller div to move with it, until it gets to the edge of the page, then remain fixed, almost as if it gets 'stuck' on the side of the page, while the container div continues to move underneath it out of sight. Can this be done?
//CSS
.move{
-webkit-transition-property:left;
-webkit-transition-timing-function:ease-in-out;
-webkit-transition-duration:1s;
left:-200px;
}
//HTML
<div onclick="this.className='move'">
<div>
some text here
</div>
</div>
Here's an example for you: http://jsfiddle.net/LjjRM/
A couple points:
1.) jQuery
2.) position: absolute
I am trying to use jQuery to calculate the window height then apply that value to a DIV (the container div) finally i want the jQuery to align an element to the bottom of the page.
<div id="wrapper">
<div id="element-align">Here is the element i wish to align to the bottom</div>
</div>
Further to my question on your OP, this can be done in CSS:
#element-align {
position: fixed;
bottom: 0;
}
If needs be you can also add left/right to the element, but the fixed positioning will mean that the element will always appear in the same place relative to the browser chrome, regardless of the scroll position of the page.
In Firefox......
<div id="container" style="overflow:scroll; width:400px; height:500px">
<div id="content" style="height:500px; width:800px"/>
</div>
The "container" DIV should have scroll bars since the div with id "content" is wider than it.
If, using JavaScript (see below), I reset the size of the "content" div to "200px", I would expect the scroll bars on the div "container" to disappear. They dont, unless I manually resize the the browser window.
function Resize() {
document.getElement("content").style.width="200px";
}
I tried forcing a reflow on container by applying a css class. This didnt work...
function Resize() {
document.getElement("content").style.width="200px";
document.getElement("container").className="test";
}
Setting overflow: scroll; should force scrollbars to be on.
If you want them to appear and disappear with the content size, try overflow: auto;