At first I was using regular html but the dropdown button wasn't working so I changed to jsfiddle to test it out. I saw that the dropwdown still didn't work.
Here's the jsfiddle: https://jsfiddle.net/ugpqxpn6/2/
<div>
<!-- Single button -->
<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>
</div>
I don't understand why it wouldn't work. I took a look at some similar questions and saw that maybe not including jquery was my problem so I added it but it still seems to malfunction. Can anybody help?
Here is a working fiddle with bootstrap.min.js and jquery.min
https://jsfiddle.net/nrgxh5rr/
<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.6/js/bootstrap.min.js"></script>
Hit F12 on your keyboard to see the developer console, you have a Javascript error:
Error: Bootstrap's JavaScript requires jQuery
Make sure you're including jQuery before bootstrap's js files.
Related
Pls av been trying to put up a dropdown bar on my page but is not working beside I linked my jQuery.min.js file and my bootstrap.css file but is not yet working can someone pls help me
Check the below snippet for dropdown Also note when you use bootstrap you have to link follow files
bootstrap.min.css
jquery.min.js
bootstrap.min.js
only then it will work
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<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>
This question already has an answer here:
Adding images with option tag [duplicate]
(1 answer)
Closed 6 years ago.
I try to create a search box with a dropdown inside the search text field and i want add a different image for every option
For now this is my result:
http://www.bootply.com/TqXN4y8Se5
The image are not visible, in dropdown are not possible add image?
Thanks for any help!
the html option tag does support text only
see other pst Adding images with option tag
altough you could use bootstraps dropdown component.
http://getbootstrap.com/components/#dropdowns
altough it requires custom javascript to listen to changes and react accordingly.
<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>
You can use a background image but it's not available cross-browser. Or you can use jquery like http://jqueryui.com/selectmenu/#custom_render
I have a React component with the following render method:
render: function() {
console.log("In render method");
return (
<div>
<div className="dropdown">
<button onClick={this.displayRest} className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span className="caret"></span>
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" className="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
);
}
The component appears like this:
So the dropdown button is displayed, but it is not responsive. If I click on it, the dropdown does not show.
Also, the statement console.log("In render method"); has no effect, as nothing is printed to the console.
Why is this component only partially rendered?
It's weird that the log statement isn't showing up. Are you sure you checked the correct console window in the browser? Also do you have jQuery included inside your project?
It's pretty annoying at times to work with vanilla react and bootstrap. Check outreact-bootstrap - it makes handling both a little bit easier.
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/
I was trying to update my version of bootstrap from 3.1.0 to the currently latests 3.3.0.
But I noticed after upgrading that my dropdown menu's aren't working anymore.
For some reason the javascript doesn't pickup the elements with the .dropdown-toggle css class.
But when I dive into the chrome javascript console and execute the following command:
$('.dropdown-toggle').dropdown()
I notice the dropdown menu's do work. I compared the html of the menu's before and after this command and it remained the same.
I also looked in the release notes from bootstrap and could find any breaking changes regarding dropdown menus. This is a example piece of my code:
<ul>
<li class="dropdown">
<a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#">Customers</a>
</li>
</ul>
<ul aria-labelledby="dLabel" class="dropdown-menu" role="menu">
<li>
Overview
</li>
<li>
Customer form
</li>
</ul>
Does anybody got a tip?
Worked just fine, only thing you must do is to use Jquery latest
Here is working fiddle
http://jsfiddle.net/2qWy8/22/
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret"></span></a>
<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>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>