I am using the dcjq accordion to display content on the left of the screen however to the right of that there is seprate content within divs that contain clear: both in the styling, but it seems that the use of clear causes the height of the content to change depending on the accordion beside it.
Both the main content and the accordion are in separate divs but ultimately within the same wrapper div. How can I disconnect them?
If the right-hand div is after the accordion menu then it will always be below if using clear:both
I suggest floating the accordion menu left and the right-hand content to the right and remove the clear from the CSS
Related
I'm working on a static site that has a side nav on some pages and the nav is meant to stick to the bottom of the screen while scrolling. How can I get the nav to stop sticking at the bottom of the parent container? The nav should stay inside the parent.
Right now it continues to stick even after the container is out of view and eventually overlaps the footer.
Here's the demo site:
https://blissful-kare-3ae082.netlify.app/checklist.html
Your element has the attribute "fixed-bottom" as one of its classes. This will affix the y-axis placement of your navigational element to the bottom of the screen, not to the bottom of the parent container.
There are a couple of things you can do to clean this up. If you just want it not to overlap, you can add padding to the bottom of your element; I found that padding it with 100px worked cleanly as in the picture below.
You may also look to affix it to the actual parent container with usage of the "relative" tag, the solution of which is discussed in various other posts on this site:
Fixed position but relative to container
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).
Is there a "clean" way to make a bootstrap standard 2-column layout with the sidebar (a list of items) long and scrollable and the main content area fixed? I would like to use the main content area to inject ajax content by intercepting the links on the left, so I would like it to stay always visible.
Just add position: fixed to your sidebar class, and style as you see fit. See an example with Bootstrap here: http://jsfiddle.net/eterpstra/nxrpu/1/
I have a Header/navigation bar on a site, it has a logo, navigation menu, and search box all in-line in that order
So the logo is on the left, followed by the nav menu and the the search box to the right.
The search box is aligned using position: relative; the problem is it is positioned relative to the nav menu which is the div before the search box.
The reason that is a problem, is because the nav menu can be of different sizes, depending on which menu items it is showing.
I need a reliable way to position my search box, is there a way to position a Div relative to a certain Div and not just the Div that is directly before it?
In the image the search box should be positioned over the sidebar, but like I mentioned the nav menu can be of different lengths so If I position relative X off of it, it will be different depending on the width of that menu
Put a wrapper around your nav menu and give it a fixed width.
Try having your nav and search inside of a single div, then use absolute positioning for the search.
I have implemented a YUI split button with a menu. The button with menu appears in a scrolling div between header and a footer divs. When exposing the menu near the footer div, the menu appears behind the div.
I have tried positioning the footer div with a z-index of -1. I have tried positioning the div (within the scrolling div) containing the button with menu using a z-index of 500. The menu always appears behind the footer div.
I am not using a YUI layout. Yet. If I did would it help?>
In addition to setting the z-index property, you also have to change the position property. The easiest thing to change it to is position:relative.
Try setting both of those properties.
I don't think YUI layout will assist you in this particular problem.
I started using YUI layout and my issues no longer exist.