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.
Related
I have the following nested dropdown list. The child items are initially hidden and clicking on the parent toggles an "open" class to display the children.
I am trying to conditionally display the entire list with an ngIf, which works correctly. However, when my condition is true the open class toggle no longer works. Any reason why simply adding the ngIf condition breaks this functionality?
<li class="nav-item dropdown" *ngIf="isMHQEnabled"> //toggles correctly without the if condition
<a class="dropdown-toggle">
<i class="fal fa-exchange"></i>
<i class="fas fa-exchange"></i>
<span class="title">Broker Transfers</span>
<span class="arrow">
<i class="fas fa-chevron-down"></i>
</span>
</a>
<ul class="dropdown-menu sub-down">
<li class="nav-item dropdown">
<a class="dropdown-toggle" (click)="initiateBrokerTransfer()">
<i class="fal fa-message-dots"></i>
<i class="fas fa-message-dots"></i>
<span class="title">Transfer Request</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="dropdown-toggle" (click)="navigate('brokertransfer')">
<i class="fal fa-list-check"></i>
<i class="fas fa-list-check"></i>
<span class="title">Transfer Status</span>
</a>
</li>
</ul>
</li>
How can I change a icon class based on a field value? I have a field name called flag, this field contains two value On and Off.
How can i change icon class based on the value:
When flag="On" show this icon fa-check-circle green
When flag is off show k-i-close-outline
<ul id="treeview" >
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="far fa-check-circle" data-id="#item.Flag" style="padding-right: 10px;"></i>#item.CompanyName
<ul>
<li data-expanded="true">
<i class="far fa-check-circle"></i>#item.flag #item.ContactName
</li>
</ul>
</li>
}
</ul>
To make it easier i added data-id as and in browser looks like this <i class="far fa-check-circle" data-id="Off" style="padding-right: 10px;"></i>.
may be if that helps
Thank you!
I'm having trouble to understand what you do and what you need but it sounds like you need a simple if statement.
Maybe something along the lines?
<ul id="treeview" >
#foreach (var item in rpInfo)
{
var flag = #item.Flag;
if (flag = 'On') { '
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="far fa-check-circle" data-id="#item.Flag" style="padding-right: 10px;"></i>#item.CompanyName
<ul>
<li data-expanded="true">
<i class="far fa-check-circle"></i>#item.flag #item.ContactName
</li>
</ul>
</li>
'} else{ '
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="k-icon k-i-close-outline" data-id="#item.Flag" style="padding-right: 10px;"></i>#item.CompanyName
<ul>
<li data-expanded="true">
<i class="k-icon k-i-close-outline"></i>#item.flag #item.ContactName
</li>
</ul>
</li>
'}
};
</ul>
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
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>
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