I have a problem that is driving me nuts. I have a gridview inside scrollable div. when I click the gridview header I can see small overlay div (z-index:10) with filtering options.
The problem is that when I move horizontal scrollbar of the parent div the filtering div is moving as well.
How to “nailed” it so it is placed under header column all the time? Should I use some JavaScript to update its position or it can be done with css?
Any help is appreciated.
Thanks.
This is hard without seeing the code but generally add position: relative to the parent element and add position:absolute to the child element to have it 'nailed' within its parent element.
of course then use top: -px and left: -px to set a value for its position within the element.
Related
I need to use position:fixed; for top div so the animation happens then I want to show other content and elements under it .
Right now the hello divs are over the container which I want them to be under the blue container .
This is the Codesandbox link
It looks the body is the blue container, so you can't put anything outside of that, but you could style another element as the blue container. z-index can be used to control what appears above/below other positioned elements.
I have this fiddle : https://jsfiddle.net/reko91/yg0rs4xc/13/
Notice when clicking the button and the flyout appears you cant click on anything. When you do, the flyout disappears.
Here is the working fiddle : https://jsfiddle.net/reko91/yg0rs4xc/14/
It's due to me changing the position of the wholeContainer div from fixed to absolute.
Can someone explain why this is ?
When you set an element to position:fixed the element becomes relative to the document instead of relative to it's parent. That means that you have to add a z-index if you want the element to behave normally.
https://jsfiddle.net/yg0rs4xc/15/
When it's absolute, it is relative to it's parent so there is no need to add a z-index.
I have a div that is floated left in a wrapper container. Now I want the div to stay in one spot when the page is scrolled. So I tried position:fixed, but this ruins the other css properties of the div.
I've tried using javascript aswell:
$(window).scroll(function () {
$("#id").css({'top',$(window).scrollTop() + 'px'});
});
That javascript isn't doing anything. Is there any other way to do this, I still want to keep the float:left property intact.
Thanks
See all the elements with different position attributes form different layers. So you have to adjust other elements when you keep this element 'position:fixed'
You have to keep empty space for this div forever, and it will stay fixed there even when you scroll your page.
See this link for better understanding
http://davidwalsh.name/demo/css-fixed-position.php
I have a scrollable div somewhere on-screen.
I have a child of that div somewhere in it.
How can I scroll the div to place this child in the center of the visible region?
(How would I determine the visible width and height of the div, and how would I scroll to place a rectangular control centered in this?)
element.scrollIntoView() might be what your looking for.
http://jsfiddle.net/a9s2G/
scrollIntoView docs
If you use jQuery you can try scrollTo plugin.
In pure js this can be done using element.scrollTop. You will need to get position of your element inside <div> and than using that value scroll main div.
To calculate inner element position you will need to get it offset top and left property related to the parent element using offsetTop and offsetLeft properties.
To center your element you may also need to use element.scrollLeft
I have a container div, and numerous elements inside of it (i.e. spans, img, divs, etc).
I would like the container div to scroll naturally if its content becomes too large. However, there is ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large.
Not even sure if this is possible.
Thanks in advance!
PS. No jQuery please! :)
Lets say this "ONE div inside of the container div that I would like to NOT cause the container to scroll if it becomes too large." is div#inner. You can set a max-width or max-height to it and make it overflow:hidden so once it reaches the max size, it will stop growing and hide the overflowing inner content.