<div class="input-group">
<div class="input-group-btn addon-button" toggle-dropdown>
<button type="button" class="button-m button-default dropdown-toggle http-button copyInput" data-toggle="dropdown" style="border-right:none !important;">
<span id="addresstype" class="custom-input">Http://</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-m dropdown-menu-m-small custom-dropdown-withInput w-100 p-0">
<li id="Http://">
Http://
</li>
<li id="Https://">
Https://
</li>
</ul>
</div>
</div>
What javascript code or directive to be used?
Related
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 using Bootstrap 3.7 and I have two buttons inside a panel-body, but whenever I click either of the buttons, both of the buttons opens their dropdown menus.
<div class="static">
<div class ="container">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">Booking</li>
<li>Flight Times</li>
<li>My Trips</li>
</ul>
</div>
<div class="panel-body">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
data-toggle="dropdown">From
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>London Stanstead Airport (<strong>STN</strong>)</li>
</ul>
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2"
data-toggle="dropdown">To
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Manchester (<strong>MAN</strong>)</li>
<li>Glasgow (<strong>GLA</strong>)</li>
<li>Dublin (<strong>DUB</strong>)</li>
<li>Paris (<strong>CDG</strong>)</li>
<li>Madrid (<strong>MAD</strong>)</li>
<li>Brussels (<strong>BRU</strong>)</li>
</ul>
</div>
</div>
</div>
</div>
Is there a way to fix this?
You will have to wrap each button dropdown into a .btn-group itself, like this :
https://www.bootply.com/ErHpvikz6x
You can check the details in Bootstrap documentation : https://getbootstrap.com/docs/3.3/components/
I'm trying to build a dropdown that functions like in the image below (or go to kayak's website):
I need a dropdown field within the dropdown field, and then I need a couple of fields that allow incrementing/decrementing.
I couldn't even get a dropdown within the dropdown to work right. I tried variations of the following:
I've tried variations of:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<form>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
</form>
</div>
I didn't even know where to begin for the increment parts of each text field.
Any thoughts on how to do this?
UPDATE: I can't keep the main dropdown open to be able to click on the dropdown or increment/decrement field within the main dropdown. The main dropdown just closes on me. Below is my latest code:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
<div class="container">
<h2>Bootstrap Counter Field</h2>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
I'm trying to put a panel with a few form elements and a dropdown category selection into a collapsible navbar in bootstrap. Currently I have
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<img class="headerToolbarIcon2" src="img/configuration.png"> Configuration<b class="caret"></b>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data>
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
</div>
I stopped event propagation on the panel, and the radio buttons work great, but whenever I click the "Personal" button to select from categories, the panel shuts. I'm sure it has something to do with having the data target of the parent dropdown, but I'm not sure how to fix that.
Bootstrap 3.0.3 can't show 2 dropdown-menu class with data-toggle="dropdown" because first click show class="dropdown-menu" and second click hide first class="dropdown-menu" and show the second . this your problem .
try this solution :
<div class="collapse navbar-collapse" style="z-index:5;">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a id="dp1" class="dropdown-toggle" data-toggle="dropdown" href="#" ><img class="headerToolbarIcon2" src="vbnet.PNG" width="20px" height="20px"> Configuration<b class="caret"></b></a>
<form class="dropdown-menu" style="width:425%; padding-top:1px;">
<li>
<div class="container" id="configurationPanel" style="height:140px;">
<div class="panel-body panel-default" style="float:left;">
<p><strong> Article <br/> Properties:</strong></p>
</div>
<div class="panel-body panel-default" style="float:left; margin-left:20px;" >
<p style="border-bottom:1px solid black;"><strong>Category</strong></p>
<div class="btn-group">
<button id="dp2" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Personal <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Weather</li>
<li>Military</li>
<li>International</li>
<li class="divider"></li>
<li>Uncategorized</li>
</ul>
</div>
</div>
</div>
</li>
</form>
</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(function(){
$("#dp2").click(function(){
$("#dp1").attr("data-toggle","");
$("#dp1").one("click",function(){
$("#dp1").attr("data-toggle","dropdown");
});
});
});
</script>
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