I am using Bootstrap dropdown menu with angular. I want to make some menu items visible and invisible using the display property. Class hidden_item is defined as display:none. When the user logs in, it does show the "Messages" menu item but clicking on it does not show Inbox and Sent links. Later if I refresh the page, everything works as expected and Inbox and Sent become visible. How can I make it work without refreshing the page?
<li [ngClass]="isLoggedIn() ? 'dropdown' : 'hidden_item'">
<a [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle">Messages <span class="nav-up-carret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
<li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
</ul>
</li>
You can use *ngIf and try it this way:
li *ngIf="isLogedIn()">
<a [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle">Messages <span class="nav-up-carret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
<li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
</ul>
</li>
This way, angular will automatically remove the block from the dom if isLogedIn() returns false but will add it if it returns true.
If I understood your problem correctly, you are missing a data-toggle="dropdown" property in your 'Messages' anchor element.
It should be
<li [ngClass]="isLogedIn() ? 'dropdown' : 'hidden_item'">
<a [routerLink]="['Mailbox', {'boxname': 'inbox'}]" class="dropdown-toggle" data-toggle="dropdown">Messages <span class="nav-up-carret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a [routerLink]="['Mailbox', {'boxname': 'inbox'}]">Inbox</a> </li>
<li><a [routerLink]="['Mailbox', {'boxname': 'sent'}]">Sent</a></li>
</ul>
</li>
Related
I'm trying to populate a drop down menu using UI Bootstrap's uib-dropdown and ng-repeat but only the last record in the array is being populated.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
<li>{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
I've confirmed that TN.resourceList has 3 records.
If I remove: class="dropdown-menu"
from: <ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
then all the records display but it no longer renders as a drop down menu.
I also tried adding the uib-dropdown-menu directive to the <ul> with the ng-repeat on it as well as the role attributes as suggested in this answer: Bootstrap Dropdownlist Issue in angular JS
But it had no effect.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Notice the ng-repeat on the li instead of the ul dom element (ng-repeat repeats elements where it added to and it's childeren).
You're repeating the dropdown-menu itself. You should have one dropdown-menu and repeat the li instead:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Easiest answer is to consider looking at the ng-repeat itself as a loop. Within normal html, you wouldn't want to have multiple lists or 'ul' tags would you? You would want one list with multiple entries or 'li' tags.
Consider the answers above as direct answers, but realistically, you should be able to look at your code and figure out that you want to repeat the list entries and not the list itself.
For whatever reason, my Materialize drop down menus won't drop on hover (they should be default).
<ul id="dropdown2" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown1" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<ul id="dropdown4" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
<ul id="dropdown3" class="dropdown-content">
<li>STRIPE FORMS</li>
<li>UPDATE FORMS</li>
</ul>
<nav>
<div class="nav-wrapper">
ACCOUNTING
<i class="material-icons">menu</i>
<ul id="nav-mobile" class="right hide-on-med-and-down hlight">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown2">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button bold-only" href="#" data-activates="dropdown1">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>CHECK PAYMENT</li>
<li><a class="dropdown-button" href="#" data-activates="dropdown4">SETTINGS<i class="material-icons right">arrow_drop_down</i></a></li>
<li><a class="dropdown-button" href="#" data-activates="dropdown3">WEBHOOKS<i class="material-icons right">arrow_drop_down</i></a></li>
<li>REPORTS</li>
<li>CHARTS</li>
</ul>
</div>
</nav>
I've got the dropdown initialized (I'm in Meteor so initializing would be inside an onRendered Template):
Template.myTemplate.onRendered(function() {
$(".dropdown-button").dropdown();
}
So my thought was to see if I could force it with some CSS (one of my weaknesses):
.nav-wrapper ul.hlight li:hover #dropdown2 {
display: block;
}
Arg. This is wrong. Can I force this in CSS if the default isn't working? Right now my version of Meteor is using jQuery 1.11
Classic approach do not work with Materialize CSS because it has its own JavaScript methods.
Define dropdown-button & dropdown-content in your template like:
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>CAMP DATES</li>
<li>CAMP PRICES</li>
</ul>
Then on client-side JavaScript initiate it like:
Template.myTemplate.onRendered(function() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: false, // Displays dropdown below the button
alignment: 'left' // Displays dropdown with edge aligned to the left of button
}
);
}
Now on hover, it will drop because you defined: hover: true, // Activate on hover
I think you missed dropdown-button part.
For more information: http://materializecss.com/dropdown.html
An MVC4 Bootstrap example app shows bullet points placed way ahead of the navigation menu items on the navigation bar. separated by brand, even. The bullets appears to be related to tags CSS. Does any one have a clue about removing the bullets? The menu is displayed by navigationextension.cs
<div class="nav-collapse collapse">
#Html.Navigation()
</div>
You should be able to target the list item (.nav-collapse .li) with the following CSS property:
list-style-type: none;
you can also add class="list-unstyled" to the ul to remove all the bullets.
Removes all default list-style (bullets, left margin, etc.) styling from a or list.
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
In case others arrive with a similar issue in Edge with .dropdown-menu
/* Edge fix */
.dropdown-menu,
.dropdown-menu ul {
list-style-type:none;
}
Note: The 2nd selector covers our custom multi-column dropdowns and can be ignored 😉
Add navbar-nav dropdown to the class
Try adding style none to li class <li class="nav-item" style="list-style-type: none;" >
I had the same problem with bullets, plus the <li> elements where invading each other spaces. I solved it by assigning the "nav" class to the <ul> element instead of the "navbar" class I was using.
This is a sample of the working list of elements:
<ul class="nav navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
And this a sample of the list of elements showing up with bullets and overlapped:
<ul class="navbar navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
This is working at least with Bootsrap version 3.
I found the explanation for this is at the treehouse page: What's the difference between nav and navbar?
Simply add the "list-unstyled" to the class of the <li> element.
For example, change this:
<li class="nav-item dropdown">
to this:
<li class="nav-item dropdown list-unstyled">
Example from bootstrap docs
This has a random dot:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
The only change is I added list-unstyled and there's no dot anymore!
<li class="nav-item dropdown list-unstyled">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
I am designing a custom bootstrap wordpress theme. I have used wp-bootstrap-navwalker for nav menu and did exactly how it has been mentioned. but still, "Engineering Services" and "Products" dropdown is not working at all! Please save me!
the site is http://mywp.net84.net/
<ul class="nav" role="navigation">
<li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul
class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">Action</a>
</li>
<li><a tabindex="-1" href="#anotherAction">Another action</a>
</li>
<li><a tabindex="-1" href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a>
</li>
</ul>
check in jsfiddle
make sure include appropriate id in the list.
I have a navbar dropdown that when highlighted, shows an extra caret. It occurs on each highlighted option in the navbar.
Here is my code:
<ul class="nav pull-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Username
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><i class="icon-home"></i> Dashboard</li>
<li><i class="icon-user"></i> Profile</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
Try this HTML, works fine for me (Google Chrome):
http://jsfiddle.net/CpQVb/