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
Related
I cant figure out or even know if its possible but I'd like to change CSS elements of an ID if certain CSS elements are present. Eg:
Ive added the HTML for the menu and the HTML for the sidebar menu that I need to modify to change its size based on the menu item being toggled or not but only on toggle.
.nav-collapse.in.collapse {
#sidebarMenu {
width: min-content;
}
<div class="nav-collapse in collapse" style="height: auto;">
<ul class="nav nav-menu" id="navigationMenu">
<li class="item-test"><a target="_blank" href="/site/index.php/gii">GII </a></li>
<li class="item-test">Dashboard</li>
<li class="dropdown item-test" tabindex="-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#">System <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="item-test">Email Log <img src="/site/images/modelIcons/emailLog.png"></li>
<li class="item-test">Flush Cache <img src="/site/images/modelIcons/action.png"></li>
<li class="item-test">Graph Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Languages <img src="/site/images/modelIcons/language.png"></li>
<li class="item-test">Reports <img src="/site/images/modelIcons/report.png"></li>
<li class="item-test">Report Parameters <img src="/site/images/modelIcons/parameter.png"></li>
<li class="item-test">System Parameters <img src="/site/images/modelIcons/parameter.png"></li>
<li class="item-test">Translations <img src="/site/images/modelIcons/sourceMessage.png"></li>
<li class="item-test">Trashed Items <img src="/site/images/modelIcons/trash.png"></li>
</ul>
</li>
<li class="dropdown item-test" tabindex="-1"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Master <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="item-test">Asset Detail Types <img src="/site/images/modelIcons/assetDetailType.png"></li>
<li class="item-test">Asset Expiration Types <img src="/site/images/modelIcons/expire.png"></li>
<li class="item-test">Asset Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">Asset Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Asset Type Categories <img src="/site/images/modelIcons/category.png"></li>
<li class="item-test">Asset Type Specification Types <img src="/site/images/modelIcons/assetSpecificationType.png"></li>
<li class="item-test">Risk Classifications <img src="/site/images/modelIcons/riskClassification.png"></li>
<li class="item-test">Class Classifications <img src="/site/images/modelIcons/classClassification.png"></li>
<li class="item-test">Currency <img src="/site/images/modelIcons/currency.png"></li>
<li class="item-test">Designations <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Device Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">File Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Industries <img src="/site/images/modelIcons/industry.png"></li>
<li class="item-test">Manufacturer Detail Types <img src="/site/images/modelIcons/assetDetailType.png"></li>
<li class="item-test">Mark Up Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Measurement Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Organisation Relationship Provider Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Part Categories <img src="/site/images/modelIcons/partCategory.png"></li>
<li class="item-test">Quotation Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">Recall Directive Types <img src="/site/images/modelIcons/type.png"></li>
<li class="item-test">Sales Order Statuses <img src="/site/images/modelIcons/status.png"></li>
<li class="item-test">Service Task Outcomes <img src="/site/images/modelIcons/serviceTaskOutcome.png"></li>
<li class="item-test">Units of Measure <img src="/site/images/modelIcons/unitOfMeasure.png"></li>
<li class="item-test">User Detail Types <img src="/site/images/modelIcons/assetDetailType.png"></li>
<li class="item-test">Work Order Priorities <img src="/site/images/modelIcons/priority.png"></li>
<li class="item-test">Work Order Statuses <img src="/site/images/modelIcons/status.png"></li>
</ul>
</li>
<div class="searchbar-tabs">
<ul id="sidebarMenu">
<li class=""><i class="icon-white icon-home"></i> Dashboard</li>
<li id="actionMenu" class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-white icon-list"></i> Actions <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon icon-align-left"></i> View Progress</li>
<li><i class="icon icon-download"></i> Export Work Order Spreadsheet</li>
<li><a target="_blank" href="/site/index.php/workOrder/workOrder/viewSummaryReport/assetGroupId"><i class="icon icon-print"></i> Work Order Summary</a></li>
<li><a class="batchReissueCertificates" href="/site/index.php/workOrder/workOrder/batchCertificateReissue/assetGroupId"><i class="icon icon-print"></i> Reissue (Update) Certificates</a></li>
<li><a class="batchReissueCertificates" href="/site/index.php/workOrder/workOrder/batchCertificateReissue/assetGroupId//replica/1"><i class="icon icon-print"></i> Reissue Certificates</a></li>
<li><i class="icon icon-remove"></i> Manage Trashed Work Orders</li>
<li><i class="icon icon-cog"></i> Manage Batch Work Orders</li>
</ul>
</li>
<li>
<a id="contextProcess" href="/site/index.php/workOrder/workOrder/process/permissionId"><img src="/site/images/modelIcons/process.png">Processes</a>
</li>
</ul>
</div>
get both element by id or class. toggle active class to the element which has to be watched. check if it has active class then it will be present and you can change the properties of other element. vice-versa.
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. :)
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 can't figure out how to move the dropdown list so that it gets positioned on the right side of my main menus. Please see this screenshot that I want to achieve. http://i.imgur.com/nlAJgaC.png
Here is the code
<div id="sidebar-left" class="col-xs-2 col-sm-2 hidden-lg">
<ul class="nav main-menu">
<li>
<a href="#" class="align-center">
<i class="fa fa-dashboard"></i>
<span class="adClass hidden-xs">Menu 1</span>
</a>
</li>
<li class="dropdown">
<a class="align-center dropdown-toggle">
<i class="fa fa-print"></i>
<span class="adClass hidden-xs">Odometer</span>
</a>
<ul class="dropdown-menu">
<li><a ng-click="stopIt($event, 'submenu1')">submenu1</a></li>
<li><a ng-click="stopIt($event, 'submenu2')">submenu2</a></li>
<li><a ng-click="stopIt($event, 'submenu3')">submenu3</a></li>
<li><a ng-click="stopIt($event, 'submenu4')">submenu4</a></li>
</ul>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-mobile"></i>
<span class="adClass hidden-xs">Menu 2</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-flask"></i>
<span class="adClass hidden-xs">Menu 3</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-bar-chart-o"></i>
<span class="adClass hidden-xs">Menu 4</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-cogs"></i>
<span class="adClass hidden-xs">Menu 5</span>
</a>
</li>
<li>
<a href="#" class="align-center">
<i class="fa fa-clipboard"></i>
<span class="adClass hidden-xs">Menu 6</span>
</a>
</li>
</ul>
</div>
Bootstrap dropdowns use position: absolute; therefore you just need to move it left like:
.dropdown-menu { left: 106px; } just as much left as you need basically
I finally got it working but with the help of AngularJS. It's working great
var captureWidthOfSideBar = function() {
$rootScope.widthSideBar = (document.getElementById('left-sidebarId').offsetWidth + 10).toString() + "px";
};
captureWidthOfSideBar();
var resizeTimeout;
$(window).resize(function() {
if (resizeTimeout) {
$timeout.cancel(resizeTimeout);
}
resizeTimeout = $timeout(function() {
$scope.$apply(function() {
captureWidthOfSideBar();
});
}, 500);
});
then on my template, this is how it's called
<ul id="ddPrinterAnalytics" class="dropdown-menu" ng-style="{left : $root.widthSideBar}">
<li><a ng-click="stopIt($event, 'main.odometer')">Odometers</a></li>
<li><a ng-click="stopIt($event, 'login')">Real Time Print Job</a></li>
<li>Battery</li>
<li>Printhead</li>
</ul>
WOOHOO!!! :)
Frustratingly not been able to resolve the CSS3 pseudo element 'last-child' that isn't working with this custom drop down navigation menu that we're working on currently.
Each drop down menu can be assigned a number of columns, in this instance, I am wanting to apply a right hand border to each column (.col_1) within the div .dropdown_3column.
CSS Snippet
.dropdown_1column_simple {width: 100px;}
.dropdown_2column_simple {width: 155px;}
.dropdown_1column {width: 550px;}
.dropdown_2column {width: 650px;}
.dropdown_3column {width: 500px;}
.dropdown_4column {width: 800px;}
.dropdown_5column {width: 1000px;}
.dropdown_2column_simple .col_1 {width:155px;}
.dropdown_2column_simple .col_2 {width:155px;}
.col_1 {width:145px; border-right: 1px solid #888;}
.col_2 {width:240px;}
.col_3 {width:490px;}
.col_4 {width:440px;}
.col_5 {width:575px;}
.col_s {width:250px;}
.col_1,.col_2,.col_3,.col_4,.col_5 {
display:inline;
float: left;
position: relative;
margin-left: 5px;
margin-right: 5px;
/*border: 1px solid #000;*/
}
HTML Snippet
<div class="dropdown_3column align_left ">
<div class="col_3">
<div class="content_top"></div>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/addict-clothing.html">
<span class="level1">Addict Clothing </span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/atticus-clothing.html">
<span class="level1">Atticus Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dephect-clothing.html">
<span class="level1">Dephect Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dickies-clothing.html">
<span class="level1">Dickies</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/dta-clothing.html">
<span class="level1">DTA Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/famous-stars-and-straps-clothing.html">
<span class="level1">Famous Stars And Straps Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/fuct-clothing.html">
<span class="level1">FUCT Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/hex-accessories.html">
<span class="level1">HEX Accessories</span>
</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/the-hundreds.html">
<span class="level1">The Hundreds</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/insight-clothing.html">
<span class="level1">Insight Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/jeepney-clothing.html">
<span class="level1">Jeepney Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/king-apparel.html">
<span class="level1">King Apparel</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/lrg-clothing.html">
<span class="level1">LRG Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/my-yard-clothing.html">
<span class="level1">My Yard</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/new-era-5950.html">
<span class="level1">New Era 5950 Hats and Apparel</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/pxl-clothing.html">
<span class="level1">PXL Clothing</span>
</a>
</li>
</ul>
</div>
<div class="col_1">
<ul>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/rebel8-clothing.html">
<span class="level1">REBEL8 Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/ringspun-clothing.html">
<span class="level1">Ringspun</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/rogue-status-clothing.html">
<span class="level1">Rogue Status </span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/the-wild-ones-clothing.html">
<span class="level1">The Wild Ones</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/volcom-clothing.html">
<span class="level1">Volcom Clothing</span>
</a>
</li>
<li class="level1">
<a href="http://009rep.clubnetdev.com/brands/zoo-york-clothing.html">
<span class="level1">Zoo York Clothing</span>
</a>
</li>
</ul>
</div>
<div class="col_3">
<div class="content_bottom"></div>
</div>
<div class="col_s">
<div class="content_side"></div>
</div>
</div>
A live version of the problem can be seen here. It is the 'Brands' dropdown in question that I am trying to remove the right hand border from the 3rd (last) column.
I'm aware of browser incompatibilities and other alternatives using JS / jQuery that exist perhaps but I'm only interested in trying to resolve this with the CSS.
I'm thinking perhaps this needs a fresh pair of eyes because I've tried tons of variations and not managed to select the last column within that drop down I believe.
Thanks in advance.
EDIT: I have attempted tons of variations but I think the issue is my inability to work out the last child of the parent item which doesn't count other divs too. I've been trying with the likes of:
div:last-child .col_1 {border-right: none !important;}
Thanks.
EDIT 2: Please find instance of my issue on JS Fiddle too if it helps anyone.
Thanks.
You are not using selectors right.
Here is a fix using nth-child:
http://jsfiddle.net/BUhgZ/3/