I have the following dom tree:
<ul class="nav">
<li>Item1</li>
<li>Item2</li>
<li>Item3 That Has a List</li>
<ul>
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" ng-model="searchText" placeholder="Αναζήτηση...">
<span class="input-group-btn">
<div class="dropdown">
<a id="toolsDrop" href="" role="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" style="padding: 6px 6px 6px 8px;">Filters <b class="caret"></b>
</a>
<ul class="dropdown-menu" style="min-width: 0; top: 34px; left: -20px;">
<li>Filter1</li>
<li>Filter2</li>
<li>Filter3</li>
<li>Filter4</li>
</ul>
</div>
</span>
</div>
</li>
<li>
<ul class="nav nav-second-level sidebar-device-list">Another list that gets filtered by the dropdown and thus, changes size
</ul>
</li>
</ul>
<li>Item4</li>
<li>Item5</li>
</ul>
As you can see in these pictures:
, because the <div class="dropdown"> is under a div inside a list, other list items, will be rendered above the dropdown menu, if the list element that has the dropdown button is too small. I have tried setting the z-index of the dropdown menu to 99999 but it doesn't work, because of how z-indexes work (given that the elements have different parents, they are in a different stacking order/scope as shown in this article).
Is there any way, other than setting the positioning of the dropdown menu to fixed, to show it above the rest of the list? (I don't want it to be above everything in the page, just above the rest of the parent ul's elements.
FINALLY I remembered the cause:
the parent element has overflow-y: hidden
Set that to initial/visible and the dropdown will be shown.
Use z-index property with the higher values for the dropdown and lesser z-index for the other div which needs to go down.
Try with giving z-index:999 for nav class. It's worked for me.
Related
I'm trying to add a div to each item in a Dropdown, however the item looses the bootstrap styling.
CSS
.ul.dropdown-menu li {
display: inline-block !important;
}
HTML
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<div>
<a>Item One</a>
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div>
</li>
</ul>
</li>
I've created examples of the dropdown before and after the additional element to demonstrate the issue.
https://jsfiddle.net/Rob_H/nqu621vm/
For continue same style they need a tag as root otherwise you can enhance css
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Example 2
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
<li>
<a>
<div>
Item One
<div>
<i class="material-icons " style="font-size:18px">more_horiz</i>
</div>
</div></a>
</li>
</ul>
</li>
Because bootstrap has a styles for .dropdown-menu>li>a but not for .dropdown-menu>li>div so you have to copy the needed styles from bootstrap dropdown and customize it for your needs.
Check the updated JSfiddle.
Hope this helps.
I use materializecss and want to implement dropdown in floating button with icon inside.
Here is the markup:
<a href="#" class="dropdown-button btn-floating btn-sm waves-effect waves-light" :data-activates="'dropdown_' + order.id">
<i class="small material-icons">more_horiz</i>
</a>
<ul :id="'dropdown_' + order.id" class="dropdown-content">
<li>one</li>
<li>two</li>
<li class="divider"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
Which is basically the same as in docs, however instead of simple button I use floating button and an icon inside. Without <i> it works fine, however with <i> I got display: none; for the dropdown.
How can I fix this?
update
Worked for me after updating to 0.98.2
I did change Bootstrap 3 drop-down behavior from on click to on hover by adding some CSS
.dropdown:hover .dropdown-menu {
display: block;
}
It's working. The sub-menu has more than 2 <li> tags and when hovering below the 2nd <li> the sub-menu will disappear.
<li class="dropdown">
Exhibitor <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Opportunities</li>
<li>Exhibitor List</li>
<li>Market Information</li>
<li>Floor Plan</li>
<li>Pricing</li>
</ul>
</li>
I can hover until <li>Exhibitor List</li> only.
When I reach <li>Market Information</li> the sub-menu disappears.
The problem is this element:
<body>
[…]
<section style="position: absolute;left: 0;right: 0;top: 100px;z-index:4000;">[…]</section>
</body>
It is an invisible stripe above the menu at around the third element. As it has a higher z-index you'll leave the menu when hovering this element.
PS: It's the container that holds the links Exhibitor list, Floor plan and Opportunities.
When I click the dropdown button the other content under it moves down with it. The I've tried z-index, position:relative; position:static How can I prevent this from happening. I don't want anything to move when the dropdown is clicked. Any ideas?
<div class='whiteBox'>
<div class='newProducts'></div>
<div id="compareInfo">
<div id="comparisionTitle">Title</div>
<div class="divStyle">
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="chooseItem">Drop down Box<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="item1DropDown" href="#">item1</a></li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<div id="compareBoxes">
<div id="Label">Text under Dropdown</div>
<button class=
"btn btn-compare" id="compareButton" type=
"submit">Submit</button>
</div>
</div>
</div>
#divStyle{
list-style:none;
position:relative;
float:left;
right:240px;
}
You have to set the div you want to have a dropdown menu like this:
list-style:none;
position:relative;
float:left;
And then set your own position for it.
Here is an excellent customizable tutorial on it.
You seem to be missing the dropdown class on your div, and the role field for the li and a tags within your dropdown. Try adding role="presentation" to those.
Like:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"...>...</button>
<ul class="dropdown-menu">
<li role="presentation"><a role="presentation ...>item1</a></li>
</ul>
</div>
This is a simplified version of a typical bootstrap navbar dropdown (in the documention you can see it working in the original navbar)
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
and when it's clicked it toogles display:block and the position is always
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
Since bootstrap highly depends on the it's markup you need to strictly reference the documentation, so I suggest you go over your code to see what's missing.
i am making a list of items with the <li> tag and different FontAwesome icon for each list item in twitter bootstrap. i tried to make the list test center vertically, but cant this way
<ul class="middle">
<li>
<a href="#">
<i class="icon-cog icon-2x"></i>
very long multiline item one</a>
</li>
<li>
<a href="#">
<i class="icon-pencil icon-2x"></i>
very long multiline item two
</a>
</li>
</ul>
which produced
this is what i want to achieve
How can i achieve this?
Is this what you are looking at
http://jsbin.com/iFaWoYa/1/
ul{list-style:none; width:100px;}
ul li {position:relative; margin:0 0 20px 0}
ul li a{position:relative; display:inline-block; padding-left:35px;}
ul li i{position:absolute; padding-right:25px; top:30%;}
<ul class="middle">
<li>
<i class="icon-cog icon-2x"></i> very long multiline item one
</li>
<li>
<i class="icon-pencil icon-2x"></i> very long multiline item two
</li>
</ul>
You may set "position:relative" to <a> tag and "position:absolute" for <i>. Then add "padding-left: <size of your icon>" to <a> and "display: block" or "display: inline-block" because without "position" it would not work. And maybe "top: 0" and "left:0" to icon for right positioning;
Try using pull-left on the icon:
<li>
<a href="#">
<i class="icon-cog icon-2x pull-left"></i>
very long multiline item one</a>
</li>
Demo: http://bootply.com/86079