I need to make a Bootstrap menu with dropdown-toggle elements inside a slimScroll. The menu needs to be vertical (I achieve that through custom CSS; bare-bones concept fiddle is at: http://jsfiddle.net/HkAAn/) and have submenus which are wider than the container. Since I am using slimScroll, the entire left part needs to be wrapped in an element with position: relative and overflow: hidden. Of course, this crops the submenus. Is there any way for the submenus to not be cropped, while retaining the wrapper with position: relative and overflow: hidden?
In order to alleviate the cropping, you must get the UL element that is your menu outside of the element that has "overflow: hidden".
Related
From the W3C Website
In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings).
But when I position an element absolutely, and it's overflowing outside of the view, it creates a horizontal scrollbar. Why? Am I understanding the specs wrong?
And is there a way to prevent this scrollbar from appearing without using overflow-x: hidden; on the body element?
Depending on what’s your goal, one option is to use an absolutely positioned wrapper with overflow: hidden; width: 100% and then position your elements (e. g. shadows on each side of the centered container wrapping the entire page contents) inside this wrapper.
I'm asking this for learning purposes; there aren't any negative aspects on this behaviour, but I just wonder if this could have any negative consequences in the future.
So I have a container div: content_wrap, which has two other div's: side_bar and main_content. The container div is 980px width, and is used to center its contents using margin-left and margin-right.
It's doing this correctly, however, when I was debugging the page (in Firefox), I noticed that the browser renders the div as being 0x0px and renders the parent div off-screen. However, it does position the child divs correctly. See this JSFiddle for an example: http://jsfiddle.net/7fsXp/7/
I Googled this and most of the answers have something to do with floats and are solved by using clear:both, but I don't use any floats. I did notice that if I change the main_content div from position:absolute; to position:relative;, the content_wrap is displayed correctly. Or I can fix it by setting a height for content_wrap.
I don't actually need to be able to see the content_wrap, so there isn't really a problem, as it is doing its job in means of centering the child divs. I just wondered if it would be a bad practice to leave it like this? Is it a bad thing, or does it matter?
Try adding other elements to this HTML and enjoy the horror :D
There are actually many things in your code, that I wouldn't do. First of all, when an element is with position: absolute or position: fixed its layout is "ignored" by other elements or in other words cannot "push" any element and that is why your container is having 0 height. It's like they are ethereal (best explanation ever, I know).
You should check this article on positioning -- http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
The fact that they are in the place you expect them to be is that there are actually no other elements in the HTML and the absolute element is positioned relatively to the body and so is the fixed one (but that's what elements with position: fixed always do). Looks what happens when I add some other content to the parent div -- http://jsfiddle.net/7fsXp/13/
So long story short - you shouldn't form your layout with absolute or fixed elements if you can do it without them.
position: fixed and position: absolute take the elements out of the flow, so using either of these positions on all child divs will collapse the parent div entirely.
If you have content below a collapsed div, it will flow up and over/under that content like this.
You don't need to position the main_content div absolutely, but you'll need to change a few things to top align the sidebar and main_content.
DEMO
Since sidebar is fixed, it's using the document, not the container div as a reference for top, while main_content would use the body (unless you add position: relative to the container). Getting rid of the body's default padding/margin will fix the small alignment difference.
body {
padding: 0;
margin: 0;
}
#main_content {
//remove position: absolute;
margin-top:70px; //top: 70px won't work unless you specify position
}
It depends on what you are willing to do, but because the default position for div is position: static; changing the position: relative; will avoid the collapse of parent div.
My basic layout is a couple of divs within a div - http://jsfiddle.net/nxPhy/ - I'm looking for a css way to have the const div always visible regardless of any horizontal scrolling of the parent div (so only the content div is actually scrolled).
Add position: relative; to container, and remove floats and add position: fixed; to the block you want to fixate.
Result:
http://jsfiddle.net/nxPhy/1/
You want to add:
position:fixed
to the div that you want fixed. Doing this will position this div and it's containing elements fixed.
I'm working on the navigation for this website and am having trouble with the dropdown nav.
Basically, I have overflow: hidden applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.
For Products there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.
Is there a way to make the dropdown container within div#navigation ignore the overflow: hidden rule I have applied? I have tried setting position to absolute and playing with the z-index, but no luck.
Any suggestions to achieve the same result are also welcome.
Solution:
Remove position:relative; rule from box with overflow:hidden; and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden; will ignore this rule.
Demo: http://jsfiddle.net/88fYK/5/
overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.
Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.
if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"
.container {
overflow: hidden;
}
.your_dropdown_menu {
position: absolute;
}
try to put position:fixed on dropdown content.
.dropdown-content{
position:fixed
}
For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that
I have a web page with a CSS dropdown navigation menu. My issue is that when I hover over the top of the menu to make the dropdowns appear, everything else in the page moves to make space for the dropdown instead of the dropdown moving over everything else. My navigation links are in a div element with the id "header" and my CSS for that element looks like this:
#header {
width: 100%;
z-index: 100;
position: relative;
}
None of the elements in the page that are moving are inside the header and non of them have a z-index specified. Can anyone tell me what I'm doing wrong?
You need to add position: absolute to the submenus that appear when you hover over a menu button.
See here for a tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/
Also relevant: http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Change position to absolute and make the position of the parent container relative.
Or, in the opposite direction, create another container within #header and stuff everything inside it.
The key point is that the inner element needs to be absolutely positioned, but in relation to its parent. Therefore position parent relatively.