I've isolated a malfunctioning component from my project.
I'm trying to enable tab selection for an input search element with a drop down selector
I'm using hosted jquery / bootstrap libraries
Problem: When i tab from the input element to the dropdown component, and hit the down key, the drop down shows, but i can't use the up or down arrows to navigate through the dropdown elements.
Expected: I should be able to use the arrow keys to navigate items in the list. The example in the documentation is keyboard selectable, and shows a corresponding focus state.
Documentation: http://getbootstrap.com/components/#input-groups
Example HTML
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Fiddle: http://jsfiddle.net/YXNMB/
You need to add role="menu" to your dropdown UL like so:
<ul class="dropdown-menu pull-right" role="menu">
Without the role="menu" the dropdown component doesn't associate the arrow keys with the drop down elements.
Related
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<li class="dropdown">
<a class=dropdown-toggle data-toggle=dropdown href="#">
<i class=material-icons>Button</i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li><i class=ti-user></i> Profile</li>
<li><i class=ti-layout-sidebar-left></i> Logout</li>
</ul>
</li>
Everything works fine in the browser even when shrinking it. But when I try to click a submenu HREF doesn't work it just closes the drop-down menu it doesnt redirect...
This is the official and proper way to make a bootstrap 3.3.7 dropdown button
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another Link</li>
</ul>
</div>
Reference bootstrap 3 - drop-down button
And also load the js file before the closing body tag. Working demo
I'm working on a small project and I need to use drop-down list, I saw a nice dropdown list without default styling.
What I need just to show how I can make the same.
Example : http://teachyourselftocode.com/
just take the same library and the same script include your project
try this
Link :
http://teachyourselftocode.com/assets/application-7790babf84d03a6beaea0c9e188a7514.css
Script:
http://teachyourselftocode.com/assets/application-c004d1f31767f20710957a4ef632ec32.js
In here you will find the way its easy to implement
http://getbootstrap.com/components/
Example:Run this with bootstrap CDN
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<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>
</div>
Hope you get what you need :)
I am developing this website and a you can see i'm using Wordpress and Bootstrap.
I'm trying to add a <button> element with a dropdown menu inside. I just created it with this code
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
...but does not work. What I'm doing wrong?
Any tips?
Thanks in advice
You are missing the boostrap JS as inclusion in your website
Because I am using this Navbar as a site editing tool rather than a normal Navbar, I require a solution that doesn't involve editing the Bootstrap code and instead use some type of style="" edit instead as I am including the Bootstrap code from elsewhere to make things light, so I can use it on multiple sites.
I am trying to stop the fixed to top Navbar from overlaying the top of the website, this is showing the Logo and top links under the Navbar, instead I am looking to try to layer it on top until the user scrolls down where the Navbar will then cover the website as it should on its way down. Here is the code I am using, if anybody can help me find a solution I would be appreciative!
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<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>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<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>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have attempted to introduce:
style="padding-top:100px;" And changed the px but with no luck, this then totally covers the top of the websites.
You just have to apply the padding style at the body instead the div:
<body style="padding-top: 100px">
It's given in the docs: http://getbootstrap.com/components/#navbar-fixed-top :-)
Body padding required
The fixed navbar will overlay your other
content, unless you add padding to the top of the <body>. Try out your
own values or use our snippet below. Tip: By default, the navbar is
50px high.
body { padding-top: 70px; }
Make sure to include this after the
core Bootstrap CSS.
I have a dropdown menu nested in a navbar that I am opening during page load by adding the open class to the li element containing the dropdown menu.
I want this menu to stay open no matter what is clicked or where a user clicks on the page. I have tried different solutions found on Stackoverflow.com to similar problems, but none of them are working. They all seem to involve stopping the propagation of the click events from closing the menu. I am using bootstrap v3.3.4.
EDIT
Here is the menu layout:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>menu1</li>
<li class="dropdown open">
menu 2 <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 class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
<div class="navbar-form navbar-right">
<div class="input-group">
<input type="text" class="form-control" style="width:310px" placeholder="Search" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">go</span>
</div>
</div>
</div>
Thanks.
EDIT 2
DanDavis suggestion in the comments is the way to go based on my testing. Handling the events and formatting myself is easier in this case than relying on bootstraps native formatting and functionality.
This uses only css. working demo
Add a class to the dropdown ul (.stay-open)
<ul class="dropdown-menu stay-open">
then apply style display block with !important
.stay-open {display:block !important;}
I am assuming that you are using a bootstrap dropdown, give this a shot:
$('li.dropdown').on({
"shown.bs.dropdown": function() { this.close = false; },
"click": function() { this.close = true; },
"hide.bs.dropdown": function() { return this.close; }
});
The above implementation will hide the dropdown when it is clicked again. If you do not like that behavior, you can simply remove the first two lines (shown.bs.dropdown and click events) and simply return false for hide.bs.dropdown event.
Here is working proof bootply
Here is a working proof bootply that will always stay open