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.
Related
In my application there can me multiple dropdowns with empty name
(meaning they do not have a value set to them).
But uib-dropdown does not open when it has empty name/lable.
What can I do?
<div>
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
</div>
Plunker
Just Adding   works
<div>
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle>
</a>
<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
</div>
plunker
I'm creating a small website and I'm stuck with the button alignment problem. I have a navbar list menu and I'd like to add a transparent Logout button near to them just in shape of another menu element, however, I couldn't be successful so far.
Here's a Bootply link you could see the problem; http://www.bootply.com/OXfRkJHEHs
I'd be grateful if you could help me.
<form>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
<a style="color:#900C3F" href="index.php">Home</a>
</li>
<li>
<a style="color:#900C3F" href="festival.php">Festival</a>
</li>
<li>
<a style="color:#900C3F" href="contact.php">Contact</a>
</li>
<li>
<a style="color:#900C3F" href="map.php">Map</a>
</li>
<li>
<input type="submit" value="Logout" class="btn element" style="color:#900C3F; background-color: transparent; margin-top:7px" href="Logout.php">
</li>
</ul></div>
<div id="push"></div>
</form>
For whatever reason, my Materialize drop down menus won't drop on hover (they should be default).
<ul id="dropdown2" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<ul id="dropdown4" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown3" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<nav>
<div class="nav-wrapper">
ACCOUNTING
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down hlight">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown2">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown1">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button" href="#" data-activates="dropdown4">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdown3">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
</div>
</nav>
I've got the dropdown initialized (I'm in Meteor so initializing would be inside an onRendered Template):
Template.myTemplate.onRendered(function() {
$(".dropdown-button").dropdown();
}
So my thought was to see if I could force it with some CSS (one of my weaknesses):
.nav-wrapper ul.hlight li:hover #dropdown2 {
display: block;
}
Arg. This is wrong. Can I force this in CSS if the default isn't working? Right now my version of Meteor is using jQuery 1.11
Classic approach do not work with Materialize CSS because it has its own JavaScript methods.
Define dropdown-button & dropdown-content in your template like:
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
Then on client-side JavaScript initiate it like:
Template.myTemplate.onRendered(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
}
Now on hover, it will drop because you defined: hover: true, // Activate on hover
I think you missed dropdown-button part.
For more information: http://materializecss.com/dropdown.html
Open the following bootstrap theme in full page mode:
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav?p=preview
on the nav bar you will see six options:
Three are font-awesome icons and the other three are text "About, Download and Contact".
What I am trying to achieve is to place the font-aweome icons in the center of the navbar instead of towards the right.
I have tried various options, like placing them in etc.. but all that results in something or the other breaking.
<ul class="nav navbar-nav nav-advance-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li>
<a class="page-scroll" href="#flax"><i class="fa fa-leaf"></i></a>
</li>
<li>
<a class="page-scroll" href="#moist"><i class="fa fa-heart"></i></a>
</li>
<li>
<a class="page-scroll" href="#designs"><i class="fa fa-paw"></i></a>
</li>
</ul>
<ul class="nav navbar-nav nav-basic-options">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
<li>
<a class="page-scroll" href="#download">Download</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
See the following code:
<div ng-controller="DropdownCtrl">
<div style="height: 100px; overflow-y: auto;">
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<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>
</ul>
</div>
</div>
</div>
http://plnkr.co/edit/DwQIi6ipDgN9LIOe5TqR?p=preview
I know that the problem is the height of the div, but I need to leave the height as is.
See the screenshot from my project:
How can I solve that problem?
I use position:fixed but it is not ok, because you use overflow:
if don't use position:fixed, Remove overflow..