I'm trying to build a list-group, with each item in the list have an icon which will trigger a dropdown menu. I have a few problems how to position the dropdown, also the glyphicon is not visible at all, unless I put text in the button, and then it has a bad position.
Also I want to build and position the dropdown dynamically with javascript, but first I need to see one that is position correctly, then I will do all the JS DOM work..
Thanks for help!
jsfiddle:
https://jsfiddle.net/DTcHh/24900/
Some code:
<div class="container">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i>ICON</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
<li class="list-group-item">
option
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="glyphicon glyphicon-option-vertical"></i></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div></li>
</ul>
</div> <!--.col-sm-4 -->
<div class="col-sm-8">
</div>
</div>
I've updated the version of bootstrap css to a cdn version which includes the glyphicons. I have then moved the anchor element next to the icon which I believe is what you're looking for. I also removed your custom css which was causing a layout issue.
<div class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="glyphicon glyphicon-option-vertical"></i>
option
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
</ul>
</div>
https://jsfiddle.net/DTcHh/24902/
Related
I have task to create dependency of options selected in first dropdown to "filter" options in second dropdown.
For this I've already create "value" in li tag which is acquired from the backend side. FE side is created of buttons and ul, il tags due to some css options etc.
Logic of selection is:
when I choose in first dropdown option1 in the second dropdown should appear only v1.0, when option2 is selected there should be latest and v2.0 etc.
I would like to have code as much easy as possible.
This is my existing HTML page:
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="1"><a rel="name1">option1</a></li>
<li value="2"><a rel="name1">option2</a></li>
<li value="3"><a rel="name1">option3</a></li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li value="2"><a rel="tag">latest</a></li>
<li value="2"><a rel="tag">v2.0</a></li>
<li value="1"><a rel="tag">v1.0</a></li>
... // more options ...
</ul>
</div>
I've started the JS with:
$('.dropdown-menu li a[rel=name1]').on('click',function() {
var value = $(this).parents('li').val()
With this I'm able to get the value from items in first dropdown but I'm lost how to continue and filter options in the second dropdown. Thank you for any help!
Unless you have a href on the a it is useless - you do not even get a little hand.
Also .val() is reserved for form field which are the only object that can have a value and be valid
Instead use data-attr on the LI itself and give each ul a class
$('#firstSel>li').on('click',function() {
var value = $(this).attr("data-value");
$("#secondSel").find("li").hide()
$("#secondSel").find("li[data-value="+value+"]").show();
});
.dropdown-menu>li { cursor: pointer }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button class="btn dropdown-toggle" name="name1" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="firstSel">
<li data-value="1">option1</li>
<li data-value="2">option2</li>
<li data-value="3">option3</li>
</ul>
</div>
<div class="btn-group">
<button class="btn dropdown-toggle" name="tag" data-toggle="dropdown">
<i class="fas fa-hdd"></i> Choose Tag <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="secondSel">
<li data-value="2">latest</li>
<li data-value="2">v2.0</li>
<li data-value="1">v1.0</li>
</ul>
I am trying to update the content of .help-block dynamically with using jQuery but not sure why I am not able to target the .help-block I know that we can simply use $('.help-block').text(.... but as I said I need to do this through jQuery Traversing mechanism like using following find() or next() and first() but none of them did the job!
$(function(){
$(".dropdown-menu li a").click(function(){
$("#selector").find('.help-block').html($(this).text());
$("#selector").next('.help-block').html($(this).text());
$("#selector").parent().find('.help-block').html($(this).text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="new-cu-emailinput"></label>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="selector" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Please Select From the List<i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></button>
<ul class="dropdown-menu" aria-labelledby="selector">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
<span class="help-block pull-right"></span>
</div>
</div>
</div>
Can you please let me know what I am doing wrong?
Your selectors are wrong. Try like following.
$("#selector").closest('.dropdown').next('.help-block').html($(this).text());
I have two icons from font icons, and I am trying to assign them to bootstrap's dropdown, to put append notifications in it.
<li class="col-md-offset-0" style="list-style-type: none">
<ul class="nav navbar-nav" style="float: right; height: 70px">
<li style="margin-top: 9px; padding-right: 35px" data-toggle="dropdown">
<span class="customIconSet" style="font-size: 25px; cursor: pointer">m</span>
</li>
<ul class="dropdown-menu dropdown-menu right">
<li>AA</li>
</ul>
<li style="margin-top: 1px; padding-right: 15px" data-toggle="dropdown">
<span class="customIconSet" style="font-size: 25px; cursor: pointer">n</span>
</li>
<ul class="dropdown-menu dropdown-menu right">
<li>BB</li>
</ul>
</ul>
</li>
However, I have two problems.
1) The dropdown gets created in the left side of the screen where the icons are located on the right side. So forms completely irrelevant to where it pops.
2) It opens BB dropdown even when I click on the other icon triggering the dropdown. At the same time, it feels like BB is holding a bigger area (like a hidden div) so that seems like the reason.
Edit: Here is a fiddle on bootply.
Problem 1 doesn't happen in this example but 2 happens.
Thanks in advance
I think this might be what you're looking for:
http://www.bootply.com/mBFRyBTJG4
I changed a some of the formatting to fit the normal bootstrap dropdown formatting, something more along the lines of:
<li 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>Separated link</li>
</ul>
</li>
By ensuring they are correctly formatted and have individual id's you should be able to have the correct dropdown open for each item.
I am slightly new to web development and I am trying to teach myself. I am trying to make a searchbar with a dropdown, so far I have made it but I have a problem with the last button, it will be used as the search button. It doesnt fix on the left hand side, it just floats under the bar.
<div class="search">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn"><span class="fa-search"></span></button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Categories
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
<button type="button" class="btn-search"><span class="fa-search">
</div><!-- /input-group -->
</span></button>
</div><!-- ...search -->
This is how you would do a search with a dropdown- you are almost there.. just move the input after the ul
<div class="col-lg-5">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Categories <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><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
link to demo
I am working with bootstrap. I added a Google autocomplete to an input box. But autocomplete is appearing under the navigation bar.
css file is here http://getbootstrap.com/2.3.2/assets/css/bootstrap.css
<form class="navbar-form pull-right">
<div class="input-prepend input-append">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
Place Search
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Places</li>
<li>Something 1</li>
<li>Something 2</li>
</ul>
</div>
<input class="input-xlarge" id="searchBox" type="text">
<div class="btn-group">
<button type="submit" class="btn dropdown-toggle">S</button>
</div>
</div>
</form>
<ul class="dropdown-menu" style="position:relative;z-index:99">
<li>Places</li>
<li>Something 1</li>
<li>Something 2</li>
</ul>
Use position:relative;z-index:99