How to enable dropdown on searchbox in bootstrap - javascript

i am designing searchBox wich has a select(dropdown ) at the right side but when i press on dropdown nothing happens means that i don't see dropdown list items ,i don't know why is not listening to onclick. please help me.
i want to do sothing like this but combo box does not work :
My code:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></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><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data- toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.js"></script>
</body>
</html>

Hello You are not identifying the class at the first place by writing
<button type="button" class="btn btn-default ></button>
refer the the class name first it will work something like this
<button class="btn btn-default type="button"></button>
use this dropdown code
<div class="dropdown">
<button class="btn btn btn-default dropdown-toggle" type="button" data-
toggle="dropdown">Action
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
and for the Whole Work details Check the below Fiddle I updated Your Work
DropDown Fiddle Demo

I can't clearly under stand your problem but as i understood
if you want to make drop down list you should use
<select class="dropdown-menu">
<option>Action</option>
<option>Another action</option>
<option>Something else here</option>
<option role="separator" class="divider"></option>
<option>Separated link</option>
</select>
The Result will be This :
like this http://www.w3schools.com/TagS/tryit.asp?filename=tryhtml_option_selected
and if you want to Selects a subset of items from array use Filters
like this https://docs.angularjs.org/api/ng/filter/filter
I hope to be useful

Related

Bootstrap dropdown list button doesn't work

When click on bootstrap button a list should be opened, but it doesn't respond on the click.
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<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>
</ul>
</div>
code:
http://jsfiddle.net/Fanadka/r0sfvrcz/
Any idea?
Firstly, you have to include jQuery in your fiddle.
Secondly, you're missing the connection between the button and the dropdown, you'll should add an ID and some aria tags, like this
<div class="btn-group dropdown">
<button type="button" class="btn btn-info">test</button>
<button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
FIDDLE

Bootstrap Dropdown Button Problems

So I have just started playing around with bootstrap, and when I try to fallow the example per Getbootstrap's component page the button doesn't want to work as advertised. I have seen and now tried a number of different solutions to this problem which has me thinking that I maybe over thinking what is wrong here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rubish</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="maindev1.0.0.css" />
<link rel="stylesheet" type="text/css" href="navbardev1.0.0.css" />
</head>
<body>
<div class="navbar-header pull-right">
<button id="menubutton" class="btn btn-default btn-md dropdown-toggle" data-toggle="dropdown"
type="button" aria-expanded="false"><span class="glyphicon glyphicon-list"></span> </button>
</div>
<ul class="dropdown-menu" role="menu">
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
<li class="divider"></li>
<li>yadayada
</li>
</ul>
</body>
</html>
I can get the button to show up and it looks like its active when I click it but it can not get the drop down to appear. I have tried it with Safari, Chrome, and Firefox with the same result in all three. Is there something that I am forgetting?
You don't say if it is in a navbar or just a normal one. From your code it looks like you are trying top do it in a navbar. I also included a normal dropdown button.
fiddle: https://jsfiddle.net/DTcHh/8607/
<!-- Normal Single Dropdown button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action <span class="caret"></span>
</button>
<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>
</ul>
</div>
select {background-color: blue; color: white; border: 2px solid; border-radius: 6px;}
<select name="yada">
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
<option value="yada">yada</option>
</select>
Why not just replace the button with a dropdown like this and then style it to look like a button?

Javascript with XSL

I'm trying to make dropdown using Bootstrap framework. This is how I did:
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Dropdown link</li>
<li>Dropdown link</li>
</ul>
</div>
</div>
Just like in example. And this is how I include .js in xsl:
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.js"> </script>
So the menu doesn't work. I see few buttons, but no dropdown effect.
You must also include jQuery and bootstrap css:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Don't forget to include jQuery BEFORE bootstrap js.

How to combine a Bootstrap btn-group with an HTML form?

Using Bootstrap 3.x, the following produces a drop down menu. I need a dropdown menu that behaves like an HTML form, with a (predetermined) value for each item in the dropdown. How can I combine these 2 things to get the functionality of an HTML form with the style of a Bootstrap btn-group?
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<form>
<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>
</ul>
You could do something like this..
http://bootply.com/103058
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<form>
<div class="form-group">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
<div class="form-group">
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</form>
</ul>
And use jquery to prevent the dropdown from closing on click..
$('.dropdown-menu>form').click(function(e){
e.stopPropagation();
});

Multiple buttons in Twitter Bootstrap show the same dropdown - why?

I am trying to put together a little dropdown menu with Bootstrap. I put up a sample on JSFiddle here.
The idea would be to have each button trigger a different dropdown list, so that clicking on File gives you a dropdown containing New and Close, clicking on Edit gives you a dropdown containing Copy, Paste and Undo and so on.
However, I get the same dropdown for all buttons. I surely must have done something wrong.
I also had a look at this JSFiddle, linked to by this StackOverflow question, but it doesn't seem to work - no dropdown shows at all when clicking.
Any suggestion?
Here is a copy of the HTML:
<div id="mainMenubar" class="btn-group">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
This should do what you want:
<div id="mainMenubar">
<button class="btn" href="#" onclick="alert('Hello!');">Menu</button>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">File</button>
<ul id="fileMenuSelector" class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Edit</button>
<ul id="editMenuSelector" class="dropdown-menu">
<li>Copy</li>
<li>Paste</li>
<li>Undo</li>
</ul>
</div>
<div class="btn-group">
<button href="#" class="btn dropdown-toggle" data-toggle="dropdown">Debug</button>
<ul id="debugMenuSelector" class="dropdown-menu">
<li>Some Debug</li>
<li>Show XML</li>
<li>Show Log</li>
<li>Shut down the lot</li>
</ul>
</div>
</div>
Edited to add styling for the navbar as discussed below:
.navbar {
display: table;
}
.navbar .nav > li > a {
padding: 5px;
}
.navbar-inner {
min-height: 0
}
I think you need to use links (anchors) inside the buttons to trigger the dropdowns instead...
<button class="btn btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
File
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>New</li>
<li>Close</li>
</ul>
</button>
Here's a working demo
EDIT: Here's an alternate version inside a .btn-toolbar so that each dropdown is inside its own btn-group. This works in FireFox: http://bootply.com/61019
I know this is like nearly 4 years old but i stumble across the same problem. ZimSystem have the correct answer but you mentioned that there is still some white spaces left when you copy and paste his code. Thats because his code isnt wrap inside a correct css style.
The fact that is nice when dropdown and buttons style doesn't look messy when put it in the same group, but anoying thing is the dropdown doesnt work properly.
Anyway here is a working code example without the use of modifying and bootstrap.css
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
</div>
dropdown-toggle class is put on the last button because it will put a border radius at the end making it look neat and finished.
I hope this will help someone else.

Categories