ng-include ruins the bootstrap ul li dropdown formatting - javascript

Hi I am trying to reproduce the following piece of code which produces a simply dropdown menu in bootstrap:
<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>
However, I want to be able to include the li tags with angularJS's ng-include...
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<ng-include src="'partials/thisView.html'"></ng-include>
</ul>
</li>
and then in thisView I would have:
<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>
However the problem is that when I do this, the li tag's parent tag is not the ng-include tag and not the ul tag which causes the formatting to look poorly (none of the bootstrap classes/CSS are applied).
So the DOM looks like this:
<ul class="dropdown-menu role="menu">
<ng-include src="'partials/thisView.html'" class="ng-scope"> <li class="ng-scope">Action</li>
<li class="ng-scope">Another action</li>
<li class="ng-scope">Something else here</li>
<li class="divider ng-scope"></li>
<li class="ng-scope">Separated link</li>
<li class="divider ng-scope"></li>
<li class="ng-scope">One more separated link</li>
</ng-include>
</ul>
Is there a way around this?


You can utilize attribute restriction instead of element restriction (as ng-include supports ECA) and specify ng-include as attribute.
i.e
<ul class="dropdown-menu" role="menu" ng-include="'partials/thisView.html'">
</ul>

Related

How to make dropdown hover after dropdown clicked?

In this case, menu dropdown 1 appear when dropdown 1 clicked and if you click dropdown 2, menu dropdown 2 will appear.
How to make dropdown hover after dropdown clicked ?
So, if I click dropdown 1, menu dropdown 1 will appear, when I hover to dropdown 2, menu dropdown 2 will appear without I click again. How to make it ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li class="dropdown">
Dropdown 1<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown 2<span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>

I guess you'd have to make your own dropdown yourself. Bootstrap, I don't think was built the way you expect.

How to get full width dropdown area with a container of all menu items

Could you please help me to do menu:
I found a link like that
`http://jsfiddle.net/KyleMit/6cu8f43m/`
but it doesn't get full width navbar with a container menu items

In that code also mentioned that details for full-width sub-menu items.
choose the full-width in all the li items. like below:
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>

just change the class of outermost div to navbar instead of container.
Or better just use <nav> </nav> instead of outermost <div class="container"> </div>

Try This
JFiddle Demo Here
snippet Example Below
.full-width.dropdown {
position: static;
}
.full-width.dropdown > .dropdown-menu {
left: 0;
right: 0;
position: absolute;
}
.full-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
.fill-width.dropdown {
position: static;
}
.fill-width.dropdown > .dropdown-menu {
left: auto;
position: absolute;
}
.fill-width.dropdown > .dropdown-menu > li > a {
white-space: normal;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="navbar navbar-inverse">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Normal <span class="caret"></span>
</a>
<ul class="dropdown-menu " role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Full Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li class="dropdown full-width">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
Fill Width <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li><a href="#">Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Really Long
</a></li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/26147186/1366033'>
How To Restrict Width of Bootstrap 3 Dropdown Menu
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>

nav bar dropdown not work any thoughts?

basically I used the demo and I am sure all the js are loaded correctly .... really need help.
The button just cannot toggle
Following are my JS and css
<link href="/static/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static/css/jumbotron.css" rel="stylesheet">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="/static/js/ie10-viewport-bug-workaround.js"></script>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
`

bootstrap dropdown won't hide

I am new in bootstrap,the dropdown won't hide, i want dropdown when
i hover on the link, but its show always, advance thanks to
everyone. here is the code
<nav>
<ul class="nav navbar-nav main-navigation">
<li>HOME</li>
<li>PORTFOLIO</li>
<li>BLOG</li>
<li>PAGES</li>
<li>FEATURES</li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">MEGA MENU</a>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
<li>CONTACT</li>
</ul>
</nav>

You can also use Jquery:
https://jsfiddle.net/2w4n7pho/
<script>
$(function(){
$("li.dropdown").hover(function(){
$(this).toggleClass("open");
});
});
</script>

By default, the Bootstrap (3.0+) dropdown menu only appears/disappears on click. This behavior would need to be overruled through CSS or JS. If you want to simply have the dropdown appear on hover while preserving the click to drop down functionality on mobile, something like this should suffice:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
Demonstration: http://www.bootply.com/tpCO1Nb4E8

Bootstrap 3 dropdown menu keep show when click any things from the dropdown

I want to keep Bootstrap 3 dropdown menu visible when click anywhere in the dropdown menu. But it will be hidden when click on anywhere outside of the dropdown menu.
<li class="dropdown">
Location <b class="caret"></b>
<ul class="dropdown-menu">
<li>Bangladesh</li>
<li>USA</li>
<li>Canada</li>
<li>Japan</li>
<li>China</li>
</ul>
</li>

Try this
HTML
<div class="dropdown" id="open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#"
data-toggle="dropdown" data-target="#"
class="btn btn-primary">
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu"
aria-labelledby="dLabel">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
DEMO

You can do this by returning false when anything inside the ul is clicked:
$(function(){
$("#open").find("ul").on("click", function(){
return false;
});
});
JSFiddle

Categories