I am working on a website where I need the menu in the sidebar to be scrollable, however, the content next to it should not be scrolled.
About the class(menu)
The height of this element is the height of the screen.
My problem is that the class (menu) keeps on going behind the (social-follow) class, but the height sort of has to stop when it reaches the social-follow container, I've tried with overflow:hidden, but that didn't work. Beneath the "Kontakt os" menu there actually is an item, but as you can see it is not visible, and can be scrolled down so you can see it either, which I am trying to fix.
Example:
;
Related
I have 3 divs nested like so:
container
drawer
drawer-content
I want vertical scrollbars to appear when viewport space is restricted. To do this I'm giving the style overflow-y: auto; to the container div and the drawer-content div. I want both these scrollbars but not for them to both appear at the same time.
There is an action which opens the drawer and before it is triggered only the container div is visible with it's scrollbar. After opening the drawer, the drawer and drawer-content divs overlay the container and I want the container's scrollbar to not exist, and only the drawer-content's scrollbar to appear instead.
This screenshot when the drawer is open shows the problem. There is a red border for container div, blue for drawer and green for drawer-content. I'd like the outer scrollbar, which is on container div, not to appear.
Of course if viewport restriction occurs once the drawer is already open, this is a non-issue. It's an issue when the viewport was already restricted before opening the drawer, so the scrollbar for Container div appears, then we open the drawer and drawer and drawer-content appear on top, but drawer-content's scrollbar should be the only one.
The reason I'm creating extra scrollbars is because this container sticks to the top of the viewport when scrolling down the main page, thus content could become inaccessible, which is undesirable.
I've got a Javascript solution to this but looking for a CSS one.
Here's a fiddle which is not exact but close to the situation. For some reason the scrollbars only show on Windows so far. Looking into that. https://jsfiddle.net/8z49z1dj/5/
Any ideas?
Thanks!
In your fiddle, you're explicitly setting the overflow-y on the container, but you'll only want that when the drawer isn't open.
You can add an extra class indicating the drawer is open or not on the parent, like so:
document.getElementsByClassName("container")[0].className += " has-open-drawer";
Then, in your CSS you're able to override that overflow behaviour like so:
.container.has-open-drawer {
overflow-y: hidden;
}
Bear in mind you might need to remove that class again if the user is able to close the drawer.
See my fork with the changes here on JSFiddle.
I have a parent div which contains many child divs and child divs can also have child.my top parent div contains a scroll bar , if any of the child div grows i want the scroll bar of the parent one to come down to make the grown content visible to the user with out scrolling down.the scroll bar should automatically come down when any of the div grows to make the coontent visible using css.this is the css which i applied on the parent div.
.parent{
width:100%;``
height:95%;
overflow-x:auto;
position:relative
}
Suppose you want scroll down to the copyright section of this page.
just right click on this page, click view source and find out the id of the copyright section div.
which is "copyright".
now add this to the current url.
http://stackoverflow.com/questions/32494082/auto-scroll-down-parent-div-when-div-grows-using-css#copyright
now hit this url in the browser and see the magic.
I have a Jquery Dialog. Inside the dialog i have a DIV with a "Save Button". This DIV can have multiple buttons or dropdowns depending on the scenario. So it's actually a TOP Options Div.
Image Here:
I need to have this DIV always VISIBLE. Right now If the dialog content exceeds the dialog height then If I scroll down I lose the visibility of my options div.
Any clue on how to perform this?
Thanks a lot.
I suggest you put the rest of the dialog content into a div, to which you apply a fixed height and an overflow-y: scroll attribute.
height : 250px
overflow-y: scroll
So in fact it's not the whole dialog you will scroll up and down while the top div stays fixed, but the second div content while the top div just stays at its place.
Example : dialog with fixed top and scrolling content
Here's one approach:
http://jsfiddle.net/andromedado/Gq54S/
The assumption is that wrap around the "New User", "close", scrollable content and buttons pane is already position fixed.
From there, you just have to make the buttons pane also position fixed, and give it the appropriate width so that it doesn't overlap the scrollbars.
Finagling width vs. padding can be verbose, so I cheated in the script and just declared vars to hold the padding info.
I also added an element "buttonSpacer", which gets it's height from the floating buttons pane; this gives the floating content something to push against, so it doesn't end up underneath the buttons pane.
I have a fixed position side tab on my page that contains filtering options for the user. When there are a lot of options, the side tab gets too long and the bottom goes beyond the bottom of the page, where it is impossible to view.
Is there a way to have the whole page continue scrolling to the bottom of the side tab div? I don't want to put scroll bars inside my side tab div, even though that would be an easy fix. I just want, when the bottom of my div butts against the bottom of the page, to bring the whole div up with it so that the bottom content is visible.
I am limited in that I can't use jQuery in this particular application. I can, however, use Dojo.
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.