my glyphicons are not working in my "dropdown" class. but it works in my "dropdown-menu" class. my first tag, the text is loaded through database, but the glyphicon is not showing up. what can I do?
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a id ="lblnames" class="dropdown-toggle" data-toggle="dropdown" runat="server" style="color:white; cursor:pointer"># <span class="glyphicon glyphicon-user"></span></a>
<ul class ="dropdown-menu">
<li>Manage Account <span class="glyphicon glyphicon-cog pull-right"></span></li>
<li><a id="endsession1" href="Account/forLogOut.aspx" style="font-family:Calibri">Log Out <span class="glyphicon glyphicon-log-out pull-right"></span></a></li>
</ul>
</li>
</ul>
I tried your code and it seems fine. The problem is that you have set the color to white in your inline CSS here:
<a id ="lblnames" class="dropdown-toggle" data-toggle="dropdown" runat="server" style="color:white; cursor:pointer"># <span class="glyphicon glyphicon-user"></span></a>
I changed the color to something else and it worked fine. :)
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 trying to populate a drop down menu using UI Bootstrap's uib-dropdown and ng-repeat but only the last record in the array is being populated.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
<li>{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
I've confirmed that TN.resourceList has 3 records.
If I remove: class="dropdown-menu"
from: <ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
then all the records display but it no longer renders as a drop down menu.
I also tried adding the uib-dropdown-menu directive to the <ul> with the ng-repeat on it as well as the role attributes as suggested in this answer: Bootstrap Dropdownlist Issue in angular JS
But it had no effect.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Notice the ng-repeat on the li instead of the ul dom element (ng-repeat repeats elements where it added to and it's childeren).
You're repeating the dropdown-menu itself. You should have one dropdown-menu and repeat the li instead:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Easiest answer is to consider looking at the ng-repeat itself as a loop. Within normal html, you wouldn't want to have multiple lists or 'ul' tags would you? You would want one list with multiple entries or 'li' tags.
Consider the answers above as direct answers, but realistically, you should be able to look at your code and figure out that you want to repeat the list entries and not the list itself.
I am trying to make my site's header responsive and I'm having trouble with the burger menu. The way my header is designed, the navbar breaks at tablets. I have my navbar set with a class of hidden-xs hidden-sm hidden-md which works fine. The problem is that the burger menu only displays on xs and sm. Adding a class of visible-md-block makes the burger menu not display even on devices smaller than tablets. There's just a white background with nothing else in it.... so it's just a white border. How can I display the burger menu on anything smaller than a desktop?
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed visible-xs-block visible-sm-block visible-md-block" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="menu-menu-1" class="nav navbar-nav hidden-md hidden-sm">
<li><a title="Home" href="#">Home</a></li>
<li><a title="Blog" href="#">Blog</a></li>
<li><a title="Portfolio" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Portfolio <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="Development Projects" href="#">Development Projects</a></li>
<li><a title="Website Templates" href="#">Website Templates</a></li>
<li><a title="Photo Gallery" href="#">Photo Gallery</a></li>
<li><a title="Graphic Design" href="#">Graphic Design</a></li>
</ul>
</li>
<li><a title="Resources" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Resources <span class="caret"></span></a>
<ul role="menu" class=" dropdown-menu">
<li><a title="HTML & CSS" href="#">HTML & CSS</a></li>
<li><a title="JavaScript & jQuery" href="#">JavaScript & jQuery</a></li>
<li><a title="PHP and MySQL" href="#">PHP and MySQL</a></li>
</ul>
</li>
<li><a title="Services" href="#">Services</a></li>
<li><a title="About" href="#">About</a></li>
<li><a title="Contact" href="#">Contact</a></li>
</ul>
</div>
</nav>
with the bootstrap visible-*-block class you have to specify each size that you want to be visible. so if you add visible-sm-block and visible-xs-block you should be able to see your hamburger menu on small and extra small devices as well.
http://getbootstrap.com/css/#responsive-utilities
it looks like you also need to remove the hidden classes and then move the visible classes to the navbar-header div:
class="navbar-header visible-xs-block visible-sm-block visible-md-block"
I know this question has been asked several times and i checked through all the possible solutions but none worked perfectly for me.
Here is my problem:
I am using bootstrap 3.2 and i have created a navbar working perfectly in chrome, firefox and latest IE but not in IE8,7. I tried adding the following files but it didnt help:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Other than that, i tried adding: filter: none !important; and removed .collapse{display:none} But after playing with these things i got a menu in vertical position rather than horizontal. Here are the two images showing the dropdown menu Before and After the hacks i tried.
IE8
IE11
After removing .collapse{display:none}
Here is my code:
<div class="navbar navbar-inverse">
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active"> <span class="glyphicon glyphicon-home"></span> </li>
<li class="dropdown">
Tipologie mandrini
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo modello</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Singoli mandrini
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo mandrini</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Macchine
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo macchina</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Montaggio
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo montaggio</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
Smontaggio
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi nuovo Smontaggio</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
<li class="dropdown">
SKF SF riparazione
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi riparazione</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
<li class="dropdown-submenu">
Ship
<ul class="dropdown-menu">
<li>Ship to Cassino</li>
</ul>
</li>
<li class="dropdown-submenu">
Accept
<ul class="dropdown-menu">
<li>Accept spindle(s)</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Altro fornitore
<ul class="dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Inserersi altro fornitore</li>
<li> <span class="glyphicon glyphicon-search"></span> Ricerca</li>
<li> <span class="glyphicon glyphicon-list"></span> Visita</li>
</ul>
</li>
</ul>
</div>
</div>
NOTE: I am using YETI theme provided here: http://bootswatch.com/yeti/
I believe there is an answer to your problem over here: IE8 issue with Twitter Bootstrap 3.
It appears that respond.js only works for local files. The referenced stackoverflow article mentions tring your website on IE8 with a local copy of bootstrap.css. Hope this helps.
I am currently using the CSS bootstrap 3.2 in my application.
I am trying to place 2 drop down menu "with the arrow only- not button style" next to each other and then to the right I want to add a search bar.
I want to use the the dropdown menu that the bootstrap has but without the button style "arrow only" and a small search bar to the right in the vertical center.
I have tried to do that but the dropdown menus and the search bar do not line up.
here is a screenshot of what I have done
and here is my code
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>My Profile</li>
<li role="presentation" class="divider"></li>
<li>Logout</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle menu-sm-padding" data-toggle="dropdown" href="#">
My Company Name <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu"><li><a class="master_client_change" href="#" id="current_client_id_2">Comp 1</a></li><li><a class="master_client_change" href="#" id="current_client_id_1">Comp 2</a></li><li><a class="master_client_change" href="#" id="current_client_id_3">Comp 3</a></li><li><a class="master_client_change" href="#" id="current_client_id_6">Comp 4</a></li></ul>
</li>
</ul>
<div class="width-sm-size box-inline-block">
<form action="/accounts_search.php" method="get" id="searchforactivities" class="navbar-form navbar-right row-right-xxsm-margin" role="search">
<div class="input-group">
<input type="search" class="form-control" name="search_term">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go</button>
</span>
</div>
</form>
</div>
How can I get the dropdown menu and the search bar to line up?
and is there a trick in making the search bar little fancy by making the the corners of the input round and the Go button a search icon?