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?
Related
I'm trying to implement a Bootstrap button dropdown. I followed the directions from the docs:
<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">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
The dropdown displays the list items on my page:
Any ideas what I'm doing wrong?
working fine when i include all the boostrap files, May be you missed some css
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Bootply snippet - Bootply Bootstrap Preview</title>
<meta name="generator" content="Bootply" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="description" content="" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- CSS code from Bootply.com editor -->
</head>
<!-- HTML code from Bootply.com editor -->
<body >
<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"> <li>Action</li> <li>Another action</li> <li>Something else here</li> <li role="separator" class="divider"></li> <li>Separated link</li> </ul></div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
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
I'm trying to find a solution for my site navigation that consists with more links. After add more links it display in 2, 3 lines.please check the attached picture.This is after add more links
in above picture, i added blue colored link and rest of all are default bootstrap navigation. I want to keep navigation in one line. if need to see more links, need to click that blue colored link (for testing purpose i set it to display none). also when re sizing the browser it also should keep in one line.
i wrote a jquery code and it works when browser decreasing the size. but when increasing the size it doesn't work by adding one by one again. Is there anyway to do this? Anybody can please help me to solve the issue or by giving an idea.
Thanks
my codes,
$(document).ready(function(e) {
$(document).load($(window).bind("load", resThis));
$(document).load($(window).bind("resize", resThis));
var tot=$('.nav').find('.chld').length;
var pos_top=$('.btn').position().top;
var marg=$('.container').width();
function resThis(){
for(var i=tot; i>=0; i--){
if(pos_top>0){
$( ".nav .chld:nth-child("+i+")" ).addClass('a');
}
pos_top=$('.btn').position().top;
}
}
});
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
//ul{list-style:none;}
//ul li{float:left; padding:10px 30px; background-color:#C0B9B9; margin:10px; border-radius:10%;}
.not{padding:0px; background-color:#FFFFFF; border-radius:0%;}
.a{display:none !important;}
</style>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<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 chld">Link <span class="sr-only">(current)</span></li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld">Link</li>
<li class="chld 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>
<a href="#" class="btn btn-info btn-lg" style="float:right;">
<span class="glyphicon glyphicon-align-justify"></span>
</a>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</body>
</html>
it works as intended for me even in full-screen and resizing it to all kinds of width... cant replicate the error you are describing and showing.
I am trying to get a bootstrap drop down menu to work but I seem to have something going wrong. Here is my html:
<head>
<meta charset="utf-8">
<title>memberpage</title>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu test" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I get the button to show up but when I click it I don't get anything. I am using the default js and css files from bootstrap. I am want it to be just an normal drop down menu.
[EDIT] okay so after adding the jquery here is my code.
<head>
<meta charset="utf-8">
<title>memberpage</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/style/bootstrap.js">
</head>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
I am still getting nothing from the page. I get the button but nothing else. no dropdown nor any response from the page.
You forgot jquery,
Add this before bootstrap.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
Quoting from Bootstrap Javascript ,
Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files).
This works well for me:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="page-header">
<div class="dropdown" style="margin-bottom:10px;">
<button class="btn btn-primary dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="">HTML</a></li>
<li role="presentation"><a role="menuitem" href="">CSS</a></li>
<li role="presentation"><a role="menuitem" href="">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="">About Us</a></li>
</ul>
</div>
</div>
</body>
I am just using CDN for the files. Fiddle
You did not include js file.Please check all script link, is it ok or not.I just include js file and its working for me.Take a look WORKING FIDDLE.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
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.