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.
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 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:
;
On my site, I've created a flex box which fills the whole window. It has a width of 100% and a height of 100vh. I've placed a text and a button in the center of it. Now I want to add a footer to the page. If I place the footer under the div (flexbox) It'll only show up if I scroll down a little bit. So can I create another div inside the flexbox which will place it's items in the lower right corner of the page?
Without code it is hard to help but maybe try in the css float:right
I have a div (it's a popup for an openlayers map, but it could pretty much be any fixed size div), that contains a jquery ui menu (which is wrapped in a ul). The menu doesn't fit inside the div very well, so I'd like to make the menu float above it so that as the menu grows I don't have to grow the size of the containing div. Is this possible?
The containing div is itself positioned absolutely, I've tried setting the ul that represents the menu to position:absolute;z-index:100 but that doesn't work. I've also tried setting overflow:visible with no joy.
This screenshot shows the issue I have:
I've added a jsfiddle that opens a popup when you click the small orange circle, and you can see that the menu inside there is bigger than the containing div.
If you tell me that my answer is not what you mean I will delete it cause I am not sure what you really need to do. You want this scrolls to disappear and if the text is bigger than the popup just to float over no matter it is going outline ?
If this is what you want you have to remove the overflow: auto from .olFramedCloudPopupContent and again to remove overflow: auto from inline style of the element #chicken_contentDiv (I am not sure that you add it with jQuery).
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.