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
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 can add icons next to texts in the menu but fails to hide text (keep icons only) in small screen.
<ul class="nav navbar-nav">
<li>
<a asp-area="" asp-controller="Home" asp-action="Index">
<span class="glyphicon glyphicon-home"></span>
Home
</a>
</li>
<li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
<li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
</ul>
Please help! Thanks.
Wrap your text in a div or span or paragraph, like this
<p class="hidden-xs">some text </p>
Wrap each menu item (text, without the glyph icon) in a span with a class of hidden-xs. This will hide the text and only leave the icons when the website is viewed on xs devices.
<span class="hidden-xs">Home</span>
<span class="hidden-xs">About</span>
<span class="hidden-xs">Contact</span>
Working demo on Codepen
Resize window to test it.
i use bootstrap 3 and i try to display a button group with a submenu.
i use bootstrap-submenu
i created the menu
http://jsfiddle.net/L8kbaqw3/
<div class="btn-group">
<button class="btn btn-primary" type="button">Actions</button>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" data-submenu="" aria-expanded="false">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a tabindex="0">Annuler</a></li>
<li><a tabindex="0">Sauvegarder</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="0">Payer</a>
<ul class="dropdown-menu">
<li><a tabindex="0">Comptant</a></li>
<li><a tabindex="0">Débit</a></li>
<li><a tabindex="0">Carte de crédit</a></li>
<li><a tabindex="0">Carte cadeaux</a></li>
<li><a tabindex="0">Chèque</a></li>
</ul>
</li>
</ul>
</div>
</div>
that work fine.
but when i try to add something under it, i don't see all the menu
http://jsfiddle.net/hxnznnz6/
it's seem like something block it to display completly the menu.
Also if you compare the layout of the two button, it's different
Edit
i removed the first btn-group like #Eduardo Arruda Pimentel said.
look ok, but the sub menu of Payer is not displayed when i click on it
New result
http://jsfiddle.net/wn9u5z28/
1)Bootstrap 3 removed support for multilevel dropdowns, citing usability issues as the cause. As you can see in these two links:
Bootstrap 3 dropdown sub menu missing
Responsive multilevel menu with Bootstrap 3
2) The reason for the different layout is that the code is different. To solve that, just recode and delete this part of line 3:
class="btn-group"
So my dropdowns all work fine but I've a main container div with a bg-color and as soon as the multi level dropdown menu goes over it the background doesn't display. The text is fine but the bg stops at the DIV margin.
I've tried using z-index at multiple stages even all the way up the nav div but nothing seems to work.
Has anyone experienced this before? Any ideas?
HTML Sample
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1" style="z-index:1;">
<ul class="nav navbar-nav">
<li><i class="fa fa-lg fa-home"></i> Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-lg fa-cog"></i> Tools</a>
<ul class="dropdown-menu multi-level">
<li class="">MAC Lookup</li>
<li>Locate ISP</li>
<li>PG&E Power Outages</li>
<li class="divider"></li>
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.