what tricks may get my dropdown to work as i've tried other tricks but to no avail. The code is below. Thanks
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="btn-group">
<button id="myid" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
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>
</body>
</html>
To disable a menu item form the dropdown use the disabled class:
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li class="disabled">Another action (disabled)</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
and prevent clicks usign jQuery:
<script>
$(".disabled > a").click(function(event) {
return false;
});
</script>
<head>
<title>test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
I think your CDNs might be giving you problems. Replace you <head> </head> with this ^ see if that works
Related
I know it's hard to provide the code for my question but I would like to know how to make Bootstrap dropdown menu can't be closed (remain open) after it has been opened by default?
Thank you
You have to use 2 functions one onclick dropdown and one onclick body
use e.stopPropagation(); to prevent closing...
var flag=true;
$( ".dropdown-toggle" ).click(function(e) {
if (!flag)
e.stopPropagation();
else
flag=false;
});
$(document).on('click', ':not(.dropdown)', function(e) {
if ($(this).closest('.dropdown').length == 0) {
e.stopPropagation();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
This solution stops propagation on the Bootstrap hide (hide.bs.dropdown) event, which stops it from continuing on to the hidden (hidden.bs.dropdown) event. You may read more into it here: http://css-tricks.com/dangers-stopping-event-propagation/
I personally prefer this way also because it uses the built in Bootstrap dropdown events, which could be found here: http://getbootstrap.com/javascript/#dropdowns-events
$(function () {
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function () {
$(this).data('closable', false);
},
"click": function (event) {
$(this).data('closable', false);
},
"hide.bs.dropdown": function (event) {
temp = $(this).data('closable');
$(this).data('closable', true);
return temp;
}
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<h3>Default behaviour</h3>
<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>
<hr/>
<h3>Preventing bootstrap dropdown from closing on click</h3>
<div class="dropdown keep-open">
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
I am trying to create a notification widget like that used in Facebook, or Stack Overflow using the drop-down element of bootstrap. The contents are now breaking and flowing out of the container.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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" style="width: 300px">
<li>Action</li>
<li>Another action</li>
<li>Something else here Something else here Something else here Something else here Something else here Something else here Something else here 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>
</div>
</nav>
My list item looks like this:
<li><a>
<div class="row">
<div class="col-md-4">
<img/>
</div>
<div class="col-md-8">
<b>Title</b><br />
<span>Description</span>
</div>
</div>
</a>
</li>
I tried adding clearfix and assigning the width to the span, but nothing helps.
All you need to do is add this to your css, it will make the content of your a wrap nicely:
.navbar .nav li .dropdown-menu li a {
white-space: normal;
}
codepen
By default Bootstrap tries to wrap all the text inside the dropdown using white-space: nowrap;. You can undo that with white-space: normal;.
.dropdown-menu>li>a {
white-space: normal !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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" style="width: 300px">
<li>Action</li>
<li>Another action</li>
<li>Something else here Something else here Something else here Something else here Something else here Something else here Something else here 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>
</div>
</nav>
The Bootstrap drop-down menu is not working. I have tried other solutions but they seem not to work.
Any clues as to why.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
Below is my script source.
This is what you want?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<head>
<body>
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Help</li>
<li role="presentation" 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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
What's the best way to achieve "striped" menu items in a Bootstrap dropdown menu? I want alternating menu items to have a slightly different background shading to make dropdown items that span multiple lines more obviously a single item.
You can use Pseudo Classes. See example
.dropdown-menu > li:nth-child(odd) {
background: #f5f5f5;
}
.dropdown-menu > li:nth-child(even) {
background: #a94442;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-danger 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>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
<li>Something else here
</li>
</ul>
</div>
</div>
<hr>
My dropdown opens up but it shows an empty menu and does not have the items I've added. Here's a picture:
However my dropdown contains items:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Choose Theme <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Blue</li>
<li>Purple</li>
<li>Green</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
This is my head:
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Am I missing something? Why does this happen?
Using Bootstrap you dont need
<script type="text/javascript"> $(document).ready(function () { $('.dropdown-toggle').dropdown(); }); </script>
Try this with out what you have for calling the script and you will see it works.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
</head>
<body>
<!--Default buttons with dropdown menu-->
<div class="btn-group">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<!--Primary buttons with dropdown menu-->
</body>
Might be js error,add this link below and i tried its works
<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>