i have the following problem, i am trying to use two dropdowns using javascript and bulma framework
but the problem is that only one dropdown is displayed when I click on it but if I click on the second one it doesn't open.
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item">
Other dropdown item
</a>
<a href="#" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
JavaScript Code:
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('click', function(event) {
event.stopPropagation();
dropdown.classList.toggle('is-active');
});
I have the respective libraries loaded both bulma and jquery, but I still can't get both dropdowns to work.
You are on the right track, but you're using .querySelector() incorrectly. See the docs:
The querySelector() method returns the first element that matches a specified CSS selector(s) in the document
Emphasis mine.
The solution is to use .querySelectorAll(). This will return an array of all the dropdowns. You can then iterate through them and attach an eventlistener to them.
document.querySelectorAll('.dropdown').forEach(item => {
item.addEventListener('click', function(event) {
event.stopPropagation();
item.classList.toggle('is-active');
});
});
Related
I'm using bulma in an application and I have a dropdown as follows:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')"
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item" onclick="javascript:alert('clicked')">
Other dropdown item
</a>
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" onclick="javascript:alert('clicked')" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
I have the onblur event handler so it will close the dropdown when the user clicks outside of it, but then when the user clicks one of the items from the dropdown the blur event gets triggered and the onclick from the item doesn't. How should I handle this?
The click event is triggered the moment you click and release. You can use a onmousedown event instead so that you get to click the item before the blur get triggered:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css">
<div class="dropdown">
<div class="dropdown-trigger">
<button class="button"
onclick="javascript:document.querySelector('.dropdown').classList.toggle('is-active')"
onblur="javascript:document.querySelector('.dropdown').classList.toggle('is-active')" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Dropdown button</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
Dropdown item
</a>
<a class="dropdown-item" onmousedown="javascript:alert('clicked')">
Other dropdown item
</a>
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item is-active">
Active dropdown item
</a>
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
Other dropdown item
</a>
<hr class="dropdown-divider">
<a href="#" onmousedown="javascript:alert('clicked')" class="dropdown-item">
With a divider
</a>
</div>
</div>
</div>
Of course the above is assuming that you would want to close the dropdown the moment you click on one of the menu items.
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've a dropdown menu which looks following like this:
<ul>
<li class="dropdown open">
<a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<span class="user-name">Hi Rajendra! <i class="fa fa-angle-down"></i></span>
<img class="img-circle avatar" src="#" alt="" width="40" height="40">
</a>
<ul class="dropdown-menu dropdown-list" role="menu" style="">
<li role="presentation"><i class="fa fa-user"></i>Profile</li>
<li role="presentation"><i class="fa fa-sign-out m-r-xs"></i>Log out</li>
</ul>
</li>
</ul>
Here is a Screenshot.
Problem:
It shows the dropdown list on page load first time without clicking menu, I tried to use visibility: hidden and display: none, it hides the list but not shows again after clicking the menu.
Please help me!!
Help would be appreciated!!
I'm assuming you're using a framework to handle some of this and I believe just removing the class open will make it appear closed to start with:
<ul>
<li class="dropdown">
<a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown">
<span class="user-name">Hi Rajendra! <i class="fa fa-angle-down"></i></span>
<img class="img-circle avatar" src="#" alt="" width="40" height="40">
</a>
<ul class="dropdown-menu dropdown-list" role="menu" style="">
<li role="presentation"><i class="fa fa-user"></i>Profile</li>
<li role="presentation"><i class="fa fa-sign-out m-r-xs"></i>Log out</li>
</ul>
</li>
I made a dropdown list using bootstrap.Dynamically I want to disable and enable the dropdown list.
html code:
<div class="span3 offset1">
<select name="primary" class="select-block" id="select_alert" style="display: none;">
<option "selected"="">Choose Alert T</option>
<option value="T1">T1</option>
<option value="T2">T2</option>
<option value="T3">T3</option>
<option value="T4">T4</option>
</select>
<div class="btn-group select select-block">
<i class="dropdown-arrow dropdown-arrow-primary"></i>
<button class="btn dropdown-toggle clearfix btn-primary" data-toggle="dropdown" id="select_alert">
<span class="filter-option pull-left">Choose Alert T</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-primary" role="menu">
<li rel="0" class="selected">
<a tabindex="-1" href="#" class="">
<span class="pull-left">Choose Alert T</span>
</a>
</li>
<li rel="1">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T1</span>
</a>
</li>
<li rel="2">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T2</span></a>
</li>
<li rel="3">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T3</span>
</a>
</li>
<li rel="4">
<a tabindex="-1" href="#" class="">
<span class="pull-left">T4</span>
</a>
</li>
</ul>
</div>
</div>
some times I want to disable and sometimes I want to enable.So How can I do this.
In this I have 2 more dropdown elemnts.All are placed in singlw div tag.Here I didn't mention that div tag id name.I just putted single dropdown element code.
Yes, by jquery you can get this:
Here is the example:
http://jsfiddle.net/jV7ye/
$(document).ready(function() {
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", true);
} else {
$("#dropdown").prop("disabled", false);
}
});
});
UPDATED JS CODE as per your need:
$(document).ready(function() {
if(!$("#chkdwn2").is(":checked"))
{
$("#dropdown").prop("disabled",true);
}
$("#chkdwn2").click(function() {
if ($(this).is(":checked")) {
$("#dropdown").prop("disabled", false);
} else {
$("#dropdown").prop("disabled", true);
}
});
});
Replace dropdown id with your id. Thanks
By using jquery we can do
Disable Dropdown
$('.select_alert').attr('data-toggle','');
Enable Dropdown
$('.select_alert').attr('data-toggle','dropdown');
If above solutions does not work for you, the try
$('#yourDropDownElement').prop('disabled', true).trigger('chosen:updated');
I'm using boostrap v 3.3.6
You can do this by add if block on the property and add disabled class to the drop down.
below is my div in that i have eanbled/disabled dropdown toggle button on IsNewEditDisabled
<button ng-if="!IsNewEditDisabled" class="btn dropdown-toggle" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>
<button ng-if="IsNewEditDisabled" class="btn dropdown-toggle disabled" ng-class="{open: status.isopen}" dropdown-toggle>
<i class="fa fa-pencil"></i><span class="caret"></span>
</button>
As the title states, I'm looking to have one single dropdown then have other HTML content in another dropdown submenu, making the dropdown act as a pop out for HTML content. The issue I'm having so far is that once I try just putting a div and code into the UL tag for the secondary drop down, it no longer stays visible on hover. Here is my current markup,
<li class="dropdown">
<a class="dropdown-toggle" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <i class="icon-caret-down"></i></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<div>
<h1 style="color: #333;">Things</h1>
</div>
</ul>
</li>
The markup is to be honest horrendous as of now, but is there an easier way to have custom content in a Bootstrap sub drop down? This way is causing miles upon miles of issues.
You can think of this way:
<ul class="unstyled">
<li class="dropdown">
<a class="dropdown-toggle btn" id="drop4" role="button" data-toggle="dropdown" href="#">GAMES <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation" class="dropdown-submenu"><a role="menuitem" tabindex="-1" href="#">Battlefield 3</a>
<ul class="dropdown-menu">
<li>
<div class="custom">
<h1 style="color: #333;">Things</h1>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This makes the menu more semantically correct and valid... I feel something you might require in the CSS is:
.custom {padding: 0 10px;}
.custom h1 {font-size: 1.5em; margin: 0; padding: 0;}
Preview
Fiddle: http://jsfiddle.net/praveenscience/yEJ3c/
If you don't need the other children and you're just looking for a rich dropdown, perhaps you want to be using the Popover component instead of the Dropdown component.
Update for Bootstrap 4 - it's now easy to add custom HTML to dropdowns:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item active" href="#">Option one</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">
<div class="row">
<div class="col">Html</div>
<div class="col">Content</div>
<div class="col">Here</div>
</div>
</a>
</div>
</div>