I want to insert custom element(not a simple link ) to drop down.
Here is my code:
<div class="container">
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">
<div style="display:block">
<span>Action</span>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-check-circle-o fa-lg"></i></button>
<button type="submit" class="invisible-input pull-right"><i class="fa fa-times-circle-o fa-lg"></i></button>
</div>
</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</ul>
</div>
</div>
I faced problem, that I cannot align label of Item like another ones.
Maybe someone can give me a helping hand to make strings in drop down aligned.
Here is a picture what I get:
I use angular, bootstrap and bootstrap-UI.
Fiddle link: http://jsfiddle.net/dJDHd/1165/
Should be a simple addition to your custom CSS file:
.dropdown-menu > li > div {
padding: 0 20px;
}
Demo
Demo 2 (Fork of OP's code - thanks Manoj Kumar)
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>
In my application, the navbar has upto 2 levels of submenu. My requirement is to change few features of a menu when either it is selected or any of its submenu (of any level) is selected. I have been given this code that does it in an ineffective way till date (ie) writing one function for every in navbar which will make all of its specific CSS/image changes. But I would like to find an effective way (mostly one method) which will perform all the CSS changes when required data is provided as input.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wrapper zeroPadding">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="firstEmptyDiv">
<div class="toggleBtnDiv" (click)="toggleBtn()">
<i class="fa fa-bars toggleButton" aria-hidden="true"></i>
</div>
</li>
<li>
<a routerLink="/dashboard" routerLinkActive="active">
<img class="iconImg" id="iconImg" src="/assets/images/dashboard_icon.svg" alt="Dashboard menu icon" />
<br>
<span class="textWrap" *ngIf="buttonColor">Dashboard</span>
</a>
</li>
<li class="nav nav-stacked" *ngIf="this.hasCompanyStructureAccess">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="borderColor"
[style.background-color]="color">
<img class="iconImg" id="iconImg" [src]="imgSrc" alt="Company structure menu icon" />
<span [style.color]="routerText" *ngIf="buttonColor" class="textWrap overflow-wrap">Company Structure</span>
<span [style.color]="caretColor" class="caret"></span>
</button>
<ul class="dropdown-menu slide">
<li *ngIf="this.dataService.hasViewLocationAccess">
<a routerLink="/location" routerLinkActive="active">Location</a>
</li>
<li *ngIf="this.dataService.hasViewBranchAccess">
<a routerLink="/branch" routerLinkActive="active">Branch</a>
<li *ngIf="this.dataService.hasViewRoleAccess">
<a routerLink="/role" routerLinkActive="active">Role</a>
</li>
<li *ngIf="this.dataService.hasViewDepartmentAccess">
<a routerLink="/department" routerLinkActive="active">Department</a>
</li>
<li *ngIf="this.dataService.hasViewDesignationAccess">
<a routerLink="/designation" routerLinkActive="active">Designation</a>
</li>
<li *ngIf="!needToShowFlag">
<a routerLink="ACL" (click)="ACL()" routerLinkActive="active">ACL</a>
</li>
</ul>
</div>
</li>
<li class="nav nav-stacked">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="leaveModuleborderColor"
[style.background-color]="leaveModulecolor">
<img class="iconImg" [style.padding]="iconImgPadding" id="iconImg" [src]="leaveModuleSrc" alt="Leave menu icon" />
<span class="textWrap" [style.color]="leaveRouterText" *ngIf="buttonColor">Leave</span>
<span [style.color]="caretColorLeave" class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="submenuList" (click)="openSecondList()" (mouseover)="openSecondList()" [style.display]="submenuListDisplay">
<a class="test" tabindex="-1" id="leaveManagementlist">Configuration<span class="caret"></span>
</a>
<ul class="dropdown-menu" *ngIf="openSecondListFlag">
<li *ngIf="this.dataService.hasViewGeneralConfigurationAccess">
<a tabindex="-1" routerLink="generalconfiguration" (click)="generalConfiguration()" routerLinkActive="active">General Configuration</a>
</li>
<li *ngIf="this.dataService.hasViewListLeaveAllocationAccess">
<a tabindex="-1" (click)="listLeaveAllocation()" routerLinkActive="active">Modify Leave Allocation</a>
</li>
</ul>
</li>
<li class="applyLeaveTab">
<a (click)="applyLeave()">Apply Leave</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" id="content">
<router-outlet></router-outlet>
</div>
In this code excerpt, when I select a submenu say 'Location', then its main menu 'Company Structure' should be changed with the following CSS values.
1) A different image should be loaded for this menu
2) background color to be changed
3) Color of caret symbol to be changed
4) A different colored border-left to be included
5) Background color of 'Location' submenu should be changed.
Similar CSS change should happen when clicking on 2 level submenu too like 'General configuration' in the example.
Any suggestions to come up with an effective way to meet this requirement is welcome. Thank you!
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/
i have a html code like this:
<input type="text" class="form-control" id="txtCopyright" placeholder="IN" />
<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu">
<li><a>IN</a></li>
<li><a>BEFORE</a></li>
<li><a>AFTER</a></li>
</ul>
</div>
Other input-group
<input type="text" class="form-control" id="txtOtherInput" placeholder="Other" />
<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown2" role="menu">
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>
and i have a jQuery like this..
$('#myDropdown li').click(function () {
$('#txtCopyright').val($(this).text());
});
$('#myDropdown2 li').click(function () {
$('#txtOtherInput').val($(this).text());
});
It actually work in me.. but the problem is that i want to use only one jQuery in all my dropdown.. it is easy to use for now because i have only 2 dropdown what if i have 20 dropdown then i will set 20 jQuery's and I think it is redundant..
My idea is to pass the id of inputs but how to do that..
Any idea..
Please help me
Thank you.
Apply class selector and use data- attribute:
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" data-control-id="txtCopyright" role="menu">
<li><a>IN</a>
</li>
<li><a>BEFORE</a>
</li>
<li><a>AFTER</a>
</li>
</ul>
and on click of li use closest() or parent() to get parent ul and then fetch its data-control-id attribute value and then do like this:
$('.dropdown-menu li').click(function () {
$('#'+$(this).closest(".dropdown-menu").data("control-id")).val($(this).text());
});
or:
$('.dropdown-menu li').click(function () {
$('#'+$(this).parent(".dropdown-menu").data("control-id")).val($(this).text());
});
DEMO:
FIDDLE EXAMPLE
If all dropdown/ input pairings each are contained in a single parent wrapper the whole issue is fairly easy. Give the input's a common class. Then from the dropdown it is a simple traverse to main parent and look for input inside by class
<div class="module_wrap">
<input class="menu-input" type="text" class="form-control" id="txtCopyright" placeholder="IN" />
<div class="input-group-btn nopadding">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border-radius:0"><span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" id="myDropdown" role="menu">
<li><a>IN</a>
</li>
<li><a>BEFORE</a>
</li>
<li><a>AFTER</a>
</li>
</ul>
</div>
</div>
JS
$('.dropdown-menu li').click(function () {
$(this).closest('.module_wrap').find('.menu-input').val($(this).text());
});
This question already has an answer here:
add previous functionality when click on add button(parent child concept in jquery) [closed]
(1 answer)
Closed 9 years ago.
My task is to add previous form when i click on add button.
When i click on Add button it will add all dropdown below each as shown in image.
And remove one line(means all 5 dropdown of one line).I am to do this functionality.
problem is:
how we can append or add one line each click on add button.
my coading is:
jQuery:
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
$(document).ready(function () {
$(".glyphicon").click(function () {
$(this).parents('.form-group').remove();
});
$(".add").click(function () {
$("form").parent(".form-group").add();
});
});
Html:
<div class="form-group">
<div class="col-sm-12" >
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday</li><li class="week">Tuesday</li>
<li class="week">Wednesday</li><li class="week">Thusday</li>
<li class="week">Friday</li><li class="week">Saturdayy</li>
<li class="week">Sunday</li>
</ul>
</div>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<label for="exampleInputEmail1"> to </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
Try using .clone() from jQuery lib and simply clone last element.
Clone manual here
EDIT:
The answer to this problem is in comments bellow ( jQuery on() function)
thank you I did this:
coading is:
$("#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
Refered link:
Cloning whole form elements after clicking button