I am making a simple dropdown menu using Bootstrap 3 to sort my list of users as follows:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
Sort by
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name<span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
</ul>
</div>
However, the glyphicon is not aligned on the same line. How can I make it be on the same line as "First Name"?
What version of bootstrap are you using?
New version 3.3.1 works just fine, here is working fiddle
http://jsfiddle.net/52VtD/9050/
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
Sort by
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name <span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
</ul>
</div>
Many thanks for your investigations. Since it appears that the JavaScript and HTML are not the problems, I decided to check my css file and found that I was overriding the default dropdown class specs. I have since adjusted it, and now it works as expected. Thanks again for all those who helped, I will upvote. :)
Related
I have 2 dropdown menu items under single parent dropdown class. But when I click dropdown action 1 then it is showing the body of dropdown menu 2 items.
<!DOCTYPE html>
<html>
<head>
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<div class="container">
<h2>Dropdown Example</h2>
<p>The <strong>toggle</strong> method toggles the dropdown.</p>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 1
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
<br>
<br>
<button class="btn btn-primary dropdown-toggle" id="menu2" type="button" data-toggle="dropdown">Dropdown Example 2
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
</ul>
</div><br>
<p><strong>Note:</strong> For dropdowns, you should always include the data-toggle="dropdown" attribute. Do not rely solely on the toggle method, as it may not work as expected in all browsers.</p>
</div>
<script>
$(document).ready(function(){
$(".dropdown-toggle").dropdown("toggle");
});
</script>
</body>
</html>
Here is the fiddle link: https://jsfiddle.net/ajay1008/jumpgkfc/
So I want to open their respective body dropdown-menus.
you must wrap each dropdown button in another .btn-group.
<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" open'">Dropdown Example 1
<span class="caret"></span></button>...</div>
mycode(you can copy this code):
https://jsfiddle.net/rezajafari2a/c1yw3hbv/
We are trying to code a way to click one of the vegetable selections and have it be added to a list at the side of the page
<div class="container">
<h2>
</h2>
<p></p>
<div class="dropdown">
<div id="dropdown" style="position:fixed; left:400px; top:120px;" class="main">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Vegetable
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menutype" tabindex="1" href="#">Carrots</a></li>
<li role="presentation"><a role="menuitem" tabindex="2" href="#">Tomatos</a></li>
<li role="presentation"><a role="menuitem" tabindex="3" href="#">Lettuce</a></li>
<li role="presentation"><a role="menuitem" tabindex="4" href="#">Peas</a></li>
<li role="presentation"><a role="menuitem" tabindex="5" href="#">Green Beans</a></li>
<li role="presentation"><a role="menuitem" tabindex="6" href="#">Potatoes</a></li>
<li role="presentation"><a role="menuitem" tabindex="7" href="#">Corn</a></li>
<li role="presentation" class="divider"></li>
</ul>
</div>
</div>
I would create a new function and add this to the dropdown:
onChange="OnSelectedIndexChange()"
And modify this function to your needs. Upon new selection on the dropdown, it will append the li item to your other list (ul). Maybe you need to change the attribute you want to get the text instead of the value.
//function for changed selection
function OnSelectedIndexChange()
{
document.getElementById('myListOfItems').append("<li>"+document.getElementById('dropdown').value+"</li>");
}
I am trying to create a mockup of a website using bootstrap nav dropdowns. I am still new to this and I have read through posts about this and tried various edits, but my dropdown is still not activating when I click it. Any suggestions or pointers would be very appreciated. Thanks!
Link to my jsfiddle: https://jsfiddle.net/allisoncodes/sdywsaf4/10/
HTML:
<div class="dropdown">
<button class="btn btn-default">
<a href="#home">
<icon class="fa fa-home"></icon>
</a>
</button>
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Community
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Recent Activity</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Forum</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Groups</a></li>
</ul>
<button class="btn btn-default">
Pet Help</button>
<button class="btn btn-default">Pets For Sale</button>
<button class="btn btn-default">Pets Services</button>
<div class="content">
</div>
</div>
jQuery:
$('[data-toggle=tab]').hover(function (e) {
$(this).click();
});
It turns out that my code was correct, I had just forgotten to include the jQuery CDN. Thanks for the help!
I have to create search engine like in this site : http://olx.co.id . it has three keywords. First is searching by Item, second is searching by City, and the third is searching by Categories. Users can search with one keywords, two keywords, and three keywords. I did't have any Idea to do this. Here is my code but I am not sure it is working well or not.
<form method="GET" action="category-grid.php">
<div class="control-group">
<input type="text" name="search_item_" class="search-field" placeholder="Searching Item ..." />
<ul class="categories-filter animate-dropdown">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" >All Cities</button>
<ul class="dropdown-menu" role="menu" id="city" >
<li role="presentation"><a role="menuitem" tabindex="-1" >Jakarta</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" >Singapore</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" >Beijing</a></li>
</ul>
</li>
</ul>
<ul class="categories-filter animate-dropdown">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">All Categories</a>
<ul class="dropdown-menu" role="menu" id="category">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Car</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Motorcycle</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Property</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Industry</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Elektronic & Gadget</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sport</a></li>
</ul>
</li>
</ul>
<a class="search-button" href="<?php echo base_url();?>search" ></a>
</div>
</form>
my question is how how to get the value of category when user changes the value of city or get the value of city when user changes the value of category.
<script>
var city; var category; var item=$('search_item').val();
$('#city li').on('click', function(){
city = $(this).text();
if(category == "") window.location.assign('<?php echo base_url()?>index.php/searching/'+city);
else window.location.assign('<?php echo base_url()?>index.php/searching/'+city+'/'+category);
});
$('#category li').on('click',function(){
$category = $(this).text();
if(city == "") window.location.assign('<?php echo base_url()?>index.php/searching/'+category);
else window.location.assign('<?php echo base_url()?>index.php/searching/'+lokasi+'/'+kategori);
});
<script>
Thanks for all comments and answers
I would suggest you to use apache solr, it's a java based search engine.
I think woud work pretty good with the scenario you want.
tutorial
download
It's just my suggestion. If you like try it out.
I have this code:
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<ul class="nav">
<li>Startseite</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
it shoud show up like this:
but it is showing up like this in my code(i click on produkte):
this is my header in html:
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/jquery191.js"></script>
<script src="{{STATIC_URL}}js/bootstrap.min.js"></script>
why is this? can someone please help me?
thanks a lot
you have used float:left for li you need to remove it from you custom css file.