The up and down arrow keys are not working when the anchor tag is used instead of the button tag. Please help me out.
<div class="dropdown">
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Dropdown Example<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a >HTML</a></li>
<li><a >CSS</a></li>
<li><a >JavaScript</a></li>
</ul>
</div>
By specifying tabindex=-1 in every anchor tag, the arrow key functionality can be brought back.
I got the answer myself. Thanks everyone.
Related
I am using following HTML to create a three level inline list. First Level shows by default on page load. When I click on first level menu i.e. 'Courses' it expands and shows second level menus. But when I click on second level menus i.e. 'Computer Courses' or 'Civil Courses', they do not expand to show third level menus.
Thanks in advance for any help.
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false" >Computer Courses<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>IT Advance</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Web Designing</a>
</li>
</ul>
</li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-
haspopup="true" aria-expanded="false">Civil Courses<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Civil Survey</a>
</li>
<li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu-
right"></i>Quantity Survey</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm not sure how twitter-bootstrap works exactly, but I can imagine having multiple <a> tags with href="#"s messes this up. Moreover, your html is not valid (you can have <ul> as a child of another <ul>) and perhaps wrapping a <ul> within an <a> is also not good practise.
Use javascript onclick functions for the expand behaviour, or dive a little deeper into twitter-bootstrap, in case they do support something like this.
P.S. Consult https://validator.w3.org/nu/#textarea to see what html is valid.
I've got a navbar in our app that has a bunch of buttons that are links to other pages, and then a conditional logoff/logon button. That button is an <a>, but it just has (click) and no href or routerLink. As such, I can't tab to it. I added routerLink="" which is working, but seems really hacky. Is there a class or something I can add to make it "tabbable"?
Here's the navbar as it was before I added that routerLink="":
<ul class="nav navbar-nav">
<li><a routerLink="/dashboard" routerLinkActive="active">Dashboard </a></li>
<li><a routerLink="/studentaccount" routerLinkActive="active">My Account</a></li>
<li><a routerLink="" (click)="logout()">Sign Out</a></li>
</ul>
Adding tabindex="0" should solve it. E.g.
<a routerLink="/dashboard" routerLinkActive="active" tabindex="0">
Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.
I do not understand how I can hide a form in html without enlarging the other element. This is a dropdown menu with a html form hide:
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Language <i class="icon-angle-down"></i> </a>
<ul class="dropdown-menu" style="background:#a2a2a2">
<li>
<form id="form-ItemIDLangID" action="ItemView.php" method="post">
English
<input type="hidden" name="itemPOST" value='itemID'>
<input type="hidden" name="langPOST" value='langID'>
</form>
</li>
...
</ul>
and this is the result:
without the form:
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Language <i class="icon-angle-down"></i> </a>
<ul class="dropdown-menu" style="background:#a2a2a2">
<li>
English
</li>
...
</ul>
this is the result:
I can't understand how I can use the form and not have that enlarged effect in the first image, I want it to look like the second image, how I can solve it?
First, you have invalid HTML. An LI can only be the sibling of other LIs. [Update: I wasn't seeing the UL that was WAY offscreen. My mistake.]
Then, you probably have styles on your form that cause the gray space in your image--something like form {margin-bottom: 15px;}. Without your CSS or a demo it's impossible to say.
I'd like to know how can i build a btn-group with a sub-menu.
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Action
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
and i' like to put this in the btn-group:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
...
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
This is what i want: (but with twiiter-bootstrap)
Explanation: Basically this btn could go anywhere, I just put it in a button group to show there is nothing special about this button.
So first, you want to add data-toggle= dropdown to your button. Then, you need to add your standard drop down menu to the button. I guess the key here is knowing that there is nothing stopping you from adding a second dropdown menu into a submenu.
So go a head an add a submenu into whatever < li > you want, and inside that, just another dropdown-menu. So essentially we have Button -> dropdown menu -> dropdown submenu -> dropdown menu -> sub elements. Alittle confusing but pretty straight forward I think
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<!--start of dropdown button -->
<button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown Button <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
<li><a tabindex="-1" href="#">Regular link</a></li>
</ul>
</li>
</ul>
</div>
<!--end of dropdown button -->
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
Edit:
After playing with this alittle, I realized that you do need the
<div class="btn-group">
wrapping the button, even if it is going to just stand alone. I created this updated fiddle to demo it.
http://jsfiddle.net/jamiematthews/yWrRA/1/
Took a bit of experimenting but here's how you go about doing it:
http://jsfiddle.net/ewQTE/2/
<div class="btn-toolbar">
<div class="btn-group">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">Left <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Dropwn Link #1</li>
<li>Dropwn Link #2</li>
</ul>
</div>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>