I have a script to add custom tabs on runtime.All the tabs are being created but for some reason those created with ng-repeat can't be selected, is like a plain label. What am I missing?
<ul class="clearfix tabs-list tabamount6 tabs">
<li data-tab="tab-1">News</li>
<li data-tab="tab-2">Meet the team</li>
<li class="current" data-tab="tab-3">Related articles</li>
<li data-tab="tab-4">Videos</li>
<li ng-repeat="t in tabs" data-tab="ctab-{{t.Id}}">{{t.Title}}</li>
<asp:Literal ID="AddNewTab" runat="server"></asp:Literal>
</ul>
Related
I have and simple ngFor and I would like for each entry to have a button with dropdown and each menu item should call a different function for the specific item in the ngFor.
The code below works and the behaviour is what I expect.
<div *ngFor="let order of orders">
<nz-dropdown>
<button nz-button nz-dropdown [nzType]="'primary'" nzGhost>
<span>Almighty Dropdown</span><i nz-icon nzType="ellipsis"></i>
</button>
<ul nz-menu>
<li nz-menu-item (click)="fc1(order)">Function 1</li>
<li nz-menu-item (click)="fc2(order)">Function 2</li>
</ul>
</nz-dropdown>
</div>
However I get the error:
ng-zorro-antd-core.js:658 [NG-ZORRO]: deprecated: 'nz-dropdown' Component > is going to be removed in 9.0.0. Please use 'nz-dropdown-menu' instead.
The code suggested by NG-ZORRO is:
<button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item>
<a>1st item</a>
</li>
<li nz-menu-item>
<a>2nd item</a>
</li>
<li nz-menu-item>
<a>3rd item</a>
</li>
</ul>
</nz-dropdown-menu>
If I use code like NG-ZORRO suggest in the documentation, how can I pass the 'order' item from the ngFor to the 'clicks' on the submenus?
Pass the order to the click function as your first example code, and it still works.
<div class="order" *ngFor="let order of orders">
{{order.name}}
<button nz-button nz-dropdown [nzDropdownMenu]="menu">Actions<i nz-icon nzType="down"></i></button>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item>
1st item
</li>
<li nz-menu-item>
2nd item
</li>
<li nz-menu-item>
3rd item
</li>
</ul>
</nz-dropdown-menu>
</div>
You can check this example out:
https://stackblitz.com/edit/ng-zorro-antd-start-hnxupx
As mentioned in the title, for some reason, particular menu items that have active class do not have active-trail class and so do their parents.
Example menu tree when I am currently at page Test2:
<ul class="menu">
<li class="first expanded">
Test
<ul class="menu">
<li class="first expanded">
Test2
</li>
</ul>
</li>
</ul>
This is how should it be when I am currently at page Test2:
<ul class="menu">
<li class="first expanded active-trail">
Test
<ul class="menu">
<li class="first expanded active-trail">
Test2
</li>
</ul>
</li>
</ul>
Any help is appreciated.
It's more likely that your theme (or a module) is overriding the output using one of these hooks and changing the classes:
theme_menu_link
theme_menu_tree
template_preprocess_menu_tree
I'd recommend starting with checking out the active theme's code.
Or you can just implement theme_menu_link() in your theme and override the classes to your liking.
I am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
My bootstrap dropdown menu changes position after I select an item and redirect to another page. The first image shows the dropdown in proper position prior to selecting dropdown item. And the second shows the position of the dropdown after I've selected a dropdown item and redirected to another page. I select the second menu item and the dropdown appears underneath the first menu item. (I guess I need a 10 reputation rating to post images, so you'll just have to imagine it. Sorry.)
My code is below
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<div class="navbar navbar-static-top">
<ul class="nav">
<li id="liHome" class="active" runat="server">
<a id="aHome" href="/home.aspx" runat="server">HOME</a>
</li>
<li id="liFindxxx" class="dropdown" runat="server">
<a id="aFindxxx" href="/xxxbrowse.aspx" class="dropdown-toggle" data-toggle="dropdown" runat="server">FIND SOMETHING</a>
<ul class="dropdown-menu">
<li id="liBrowsexxx" class="dropdown" runat="server">
<a id="addBrowsexxx" href="/xxxbrowse.aspx" runat="server">Browse</a>
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li>
Action 4
</li>
<li class="divider"></li>
<li class="nav-header">Header</li>
<li>
A Link
</li>
<li>
Another Link
</li>
</ul>
</li>...
When i add a active class to li with id liFindxxx like class="dropdown active", or to a li from the submenu i don't find a problem.
When you remove the dropdown class from li with id liFindxxx you will get the results you describe. So make sure to add active to class tag and not overwrite it.
Just looked at the Bootstrap toolkit and attempting to get the dropdown's working on the top menu.
The code I have for the menu is as follows
<div class="topbar">
<div class="fill">
<div class="container">
<ul class="nav">
<li class="active">Home</li>
<li>About Us</li>
<li>Site News</li>
<li class="dropdown">
Community
<ul class="dropdown-menu">
<li>Chatroom</li>
<li class="divider"></li>
<li>Forums</li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search" />
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
Account
<ul class="dropdown-menu">
<li>Profile</li>
<li>Settings</li>
<li>Messages</li>
<li class="divider"></li>
<li>Admin</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
The dropdown isn't doing anything when clicked?
I have included the following css file.
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
Can anyone help me here?
Thanks.
Try to add the JavaScript file for the dropdown functionality too - http://twitter.github.com/bootstrap/#javascript
You need to make sure that you have a reference to jquery, and a reference to the bootstrap js in your page.
e.g
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-dropdown.js"></script>
Then, you either need to give one of your containers the attribute, data-dropdown="dropdown" , or explicitly set the container as a dropdown container using jquery, $('#mycontainerid').dropdown();
Generally having Jquery referenced above Bootstrap does the trick. You don't even have to mention bootstrap-dropdown explicitly. worked for me on two different occasions. Hope it helps!
Try adding the data-dropdown property to your initial <li> e.g.
<li class="dropdown" data-dropdown="dropdown">
Hope this helps.