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>
Related
how can I make the dropdown menu to expand upwards instead of downwards?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<div class="container">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</body>
</html>
I expect the dropdown menu to expand upwards instead of downwards but the actual output is, the dropdown menu shows downward.
if the button is the only thing on your page, and I suspect that from your code, the dropup wouldn't work... so check the code below and try removing the H1 and p tags...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h1> This is demo text </h1>
<p>There needs to be some text... else it won't open up</p>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>
Here is a bootstrap solution
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<br>
<div class="container">
<div class="btn-group dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
COLOR
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">red</a>
<a class="dropdown-item" href="#">yellow</a>
</div>
</div>
</div>
</body>
</html>
I just haven't been able to figure out the syntax
I am trying to have a drop-down menu appear when I click on the second button.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
</body>
</html>
My first attempt at making a nav menu. (For some reason, I am unable to submit this question without providing "details" so please forgive this meaningless text here)
I think you're missing the call to bootstrap's javascript library which is needed for the hamburger nav. Try adding this after you add the jquery reference (i.e. <script src="...jquery.min.js"...)
<!-- 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>
For more information, see the Bootstrap documentation page: Getting Started, as well as the updated code snippet below.
<link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity=
"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin=
"anonymous" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type=
"text/javascript">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://use.fontawesome.com/926120954b.js" type="text/javascript">
</script>
<!-- My CSS -- >
<link rel="stylesheet" type="text/css" href="mystyle.css">-->
<!--end head: </head> start body:<body>-->
<ul class="nav nav-tabs">
<li role="presentation"><i class="fa fa-home fa-1g" aria-hidden="true"></i></li>
<!-- ****BEGIN THE DROPDOWN TAB-->
<li role="Presentation" class="dropdown-menu">
<a class="Pet" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Community <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>item</li>
</ul>
</li>
<!-- ***END THE DROPDOWN TAB -->
<li role="presentation">Pet Help</li>
<li role="presentation">Pets for Sale</li>
<li role="presentation">Pet Services</li>
</ul>
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
Here is some code from my project:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
How can I make the text(select) and the caret appear in one line?
use this css:
#btnText{
display: inline;
padding-right: 10px;
}
Put the Span with the caret in the #btnText div.
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'><span class='caret'> </span>select</div></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
#btnText{
display: inline-block;
margin-right: 10px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
By simply adding display:inline-block to your #bigText div as in the snippet below. I have also added some margin for spacing.
#btnText{
display: inline-block;
margin-right: 5px;
}
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button class='btn btn-small dropdown-toggle' data-ng-click='open=!open;openDropdown()'><div id='btnText'>select</div><span class='caret'></span></button>
<ul class='dropdown-menu' aria-labelledby='dropdownMenu'>
<li><a data-ng-click='selectAll()'><i class='icon-ok-sign'></i> Check All</a></li>
<li><a data-ng-click='deselectAll();'><i class='icon-remove-sign'></i> Uncheck All</a></li>
<li class='divider'></li>
<li data-ng-repeat='option in options'> <a data-ng-click='setSelectedItem()'>{{option.name}}<span data-ng-class='isChecked(option.id)'></span></a></li>
</ul>
</div>
I'm trying to use a component of bootstrap : the dropdown. I made my code with the help of the documentation.
This is my entire navbar :
<nav class="nav navbar-default">
<div class="container-fluid">
<div class="navbar-header ">
AMG
</div>
<ul class="nav navbar-nav">
<li>Menu</li>
<li class="dropdown">
<a class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</a></li>
<ul class="dropdown-menu" >
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
<div>
</ul>
<ul class="nav navbar-nav navbar-right ">
<li><p class="navbar-text"><span class="essaiActuel"></span></p></li>
<li><a><div class="session"></div></a></li>
</ul>
</div>
</div>
This is the 3 links I added :
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
The link is displayed but the dropdown menu doesn't appear. I tried to do my code in a jsfiddle and it works so I think there is a problem with the links.
EDIT :
I changed the links :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Here is the jsFiddle link : https://jsfiddle.net/DTcHh/10895/
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js">
This is not necessary as it's a JS file.. But as I can see you are adding:
Updated with jQuery
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Once it's version 3.0.0 and the JS File is 3.3.5.
Try it again with both files from the same framework version
If it's working in the JSFiddle, maybe you have some extra code that is bad. So for example a div with the same ID or Class..
Also Try to show us your working JSFiddle.