I am currently having issues with my dropdown menus. I would like them to only open/close when the dropdown menu is clicked, not the list items or anywhere else in the body.
Here is my code that I am having the issues with:
<main>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>
<span style="height:50px" />
</li>
<li class="dropdown" id="mi1">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Service Provision<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Service Provision<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Automation Requests<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</li>
<li class="dropdown">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">NMC<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Customers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Contractors<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Suppliers<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</li>
<li class="dropdown">
<a class="menu-toggle" href="#" class="dropdown-toggle" data-toggle="dropdown">Site Access<span class="fa fa-chevron-down pull-right sideMenuChevrons"></span></a>
<ul class="sideDropDown dropdown-menu" role="menu">
<li>Site Access<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
<li>Key Issue<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</ul>
<div class="dropup">
<a id="menu-toggle-reversed" href="#" class="dropdown-toggle dropup" data-toggle="dropdown"><i id="adminIconPadding" class="fa fa-user-md"></i>Admin<span class="fa fa-chevron-up pull-right sideMenuChevronsDropUp"></span></a>
<ul id="adminDropup" class="dropdown-menu" role="menu">
<li>Settings<span class="fa fa-external-link pull-right newTabIcon" onclick="window.open('#')"></span></li>
</ul>
</div>
</div>
I have tried adding inline javascript to "stopPropagation" however this has resulted in the dropdown menu not opening at all.
Here is a rough jsfiddle of what is happening with the dropdown menus in the left navigation bar: https://jsfiddle.net/jr_iridium/aqLa77ax/
I'm relatively new to bootstrap so please let me know if I have made any mistakes.
Thanks in advance.
Here is my answer, after long testing since I used to with Boostrap 3. By removing the data-toggle="dropdown" is the only way to remove auto close during outside clicks. Related to here but your question is Bootstrap 4
Try this:
https://jsfiddle.net/rigz/pdc4un6L/5/
If the fiddle doesn't work just let me know, I'm having weird issue in fiddle since I'm under corporate proxy posting this :P
Related
I have a code like below in my html
<ul class="nav">
<li class="no-bullet " onclick="window.location = 'ask_question.html';">
<button type="button" class="signout_btn line_height">
<i class="fa fa-home " aria-hidden="true"></i>
Home</button>
</li>
<li class="sub-menu"><a href="#">
<i class="fa fa-tags" aria-hidden="true"></i>
Search by Category</a>
<ul class="" id="loadCategories">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu"><a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Switch City </a>
<ul class="" id="loadCities">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="no-bullet " onclick="window.location = 'user_profile.html';" >
<button type="button" class="settings_btn line_height">
<i class="fa fa-user" aria-hidden="true"></i>
My Profile</button>
</li>
<li class="no-bullet " onclick="window.location= 'all_users.html';">
<button type="button" class="signout_btn line_height" id="btnFindAFriend">
<i class="fa fa-users" aria-hidden="true"></i>
Find A Friend</button>
</li>
</ul>
If you notice the above code, I have li which on click I am directing to a certain html page. Inside the li I have put a button there in order to make all my menu option look uniform. In order to achieve that I did some make and break to make it look exact similar.
But I am unable to make all of them look exactly the same. I want to have the same height and size of all the menu option.
Can someone recommend a correct way to solve this.
Here's the fiddle for the same.
I have a problem with twitter bootstrap. I created a simple dropdown menu, but when i inspect the code in chrome inspector, i see that the class nav nav-pills are added to the <ul class="dropdown-menu pull-right"> element.
How can i delete these classes ?
<div class="btn-group">
<a class="btn btn-circle btn-default " href="javascript:;" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil-square-o"></i> Action
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a id="saveButton" href="javascript:;">
<i class="fa fa-save"></i> Save </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-paste"></i> Save as </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-trash-o"></i> Delete </a>
</li>
</ul>
</div>
Here you have a jsfiddle with bootstrap using your code and nothing happends. You might wanna check your javascript code and event listeners because you might be adding these classes with javascript code by yourself.
<div class="btn-group">
<a class="btn btn-circle btn-default " href="javascript:;" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil-square-o"></i> Action
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a id="saveButton" href="javascript:;">
<i class="fa fa-save"></i> Save </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-paste"></i> Save as </a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-trash-o"></i> Delete </a>
</li>
</ul>
</div>
Hi,My question is how to drag the content when clicks on any option in
dropdown,colud you please tel me...
it is leftside menu-bar,when clicks on any dropdown item it is covering the below menu-bar list,so i need to drag the other menu bar
list when clicks on any dropdown list..
<ul class="sidebar-menu">
<li>
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="active dropdown">
<a href="general.html" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-gavel"></i> <span>General <span class="caret"></span></span>
</a>
<ul class="dropdown-menu">
<li><a href="#General1" class="btn btn-success" data-toggle="tab" >General1</a></li>
<li><a href="#General2" class="btn btn-success" data-toggle="tab" >General2</a></li>
<li>General3</li>
</ul>
</li>
<li>
<a href="basic_form.html">
<i class="fa fa-globe"></i> <span>Basic Elements</span>
</a>
</li>
<li>
<a href="simple.html">
<i class="fa fa-glass"></i> <span>Simple tables</span>
</a>
</li>
</ul>
My code for a 2 level menu goes like this:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
</a>
</li>
</ul>
</li>
<ul>
Now I want to select the span with id=destruct, which is at level 1 and on click remove entire html in the li (including the second level ul tag). You must have got it that I am trying to make a "X", upon clicking which the menu item and any sub-menu item deletes.
However, I need your help in selecting the correct elements. For only Level 1 menu, the following jQuery code works:
$(".destruct").click(function(e){
$(this).parent().remove();
});
What could be the correct selector for Level 2 menu? I tried a few options like nth children and all, but cant seem to get it right.
You have this: li > a > span, so if you start in the span, you should look at the parent of the parent, of what is best, search for the closest "li" (because yo can change your html structure inside li's without tuch your jquery code). With a change in the html (add the x in all levels) you can get what #Juan suggested:
<ul class="nav nav-stacked navbar-fixed" id="side-menu">
<li class="active ">
<a href="index.html" data-toggle="tooltip" data-placement="bottom" title="Click here to go to home page">
<i class="fa fa-home fa-fw"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="">
<a href="#" data-toggle="tooltip" data-placement="bottom" title="xyz">
<i class="fa fa-users fa-fw"></i> Level 1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li class="nav-header">
<a href="#" data-toggle="collapse" data-target="#comMenu">
<i class="fa fa-cogs fa-fw"></i> Level 1
<i class="fa fa-caret-down fa-fw"></i>
<span class="destruct" style="float:right"> X </span>
</a>
<ul class="nav nav-second-level nav-stacked collapse " id="comMenu">
<li>
<a href="#">
<i class="fa fa-exchange fa-fw"></i> Level 2.1
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download fa-fw"></i> Level 2.2
<span class="destruct" style="float:right">X</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-check-circle fa-fw"></i> Level 2.3
<span class="destruct" style="float:right">X</span>
</a>
</li>
</ul>
</li>
<ul>
$(function () {
$(".destruct").click(function() {
$(this).parent().parent().remove();//first option
$(this).closest('li').remove();//best option
});
});
Working example: http://codepen.io/anon/pen/ZGaGby
I copied over the navbar example from the docs and it worked fine. I made several edits and now the toggle button is not working. I've looked at several threads in StackOverflow and haven't found anything that's helping me. Here is my code:
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#addressToolBar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="dropdown">
<button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a>4203 Afton Ln, 78744</a></li>
<li><a>4511 Elwood Rd, 78722</a></li>
<li><a>8518 FM 1826, 78736</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-plus"></i> add new</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-mail-forward"></i> import</a></li>
</ul>
</div>
</div>
<div class="collapse navbar-collapse" id="addressToolBar">
<form class="navbar-form navbar-left address-search" role="search">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Other <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a><i class="fa fa-mail-reply"></i> export</a></li>
<li><a><i class="fa fa-file-excel-o"></i> get all invoices</a></li>
<li><a><i class="fa fa-usd"></i> billing options</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-trash"></i> delete</a></li>
</ul>
</li>
<li><a><i class="fa fa-edit"></i> Edit</a></li>
<li><a><i class="fa fa-plus"></i> Add New</a></li>
</ul>
</div>
</div>
</div>
Here is a (non-working) fiddle.
Your toggle button has a lower z-index than other elements, hence you can select it. Just add this line to your CSS and problem solved :
.navbar-toggle {
z-index: 100000;
}
See Bootply for reference
Your nav toggle is working fine. The issue is being caused by this bit of code
<div class="dropdown">
<button class="dropdown-toggle btn btn-primary navbar-btn" data-toggle="dropdown" role="button" aria-expanded="false"><span class="address-selected">4203 Afton Ln</span> <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a>4203 Afton Ln, 78744</a></li>
<li><a>4511 Elwood Rd, 78722</a></li>
<li><a>8518 FM 1826, 78736</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-plus"></i> add new</a></li>
<li class="divider"></li>
<li><a><i class="fa fa-mail-forward"></i> import</a></li>
</ul>
</div>
With position relative it is covering the entire width of the nav and so the toggle button is behind it and cant be pressed.
You could look at changing the position or at adding a z-index:xxxx; to the toggle button to keep it on the top layer.