Ng-zorro-antd: Tabs with Router - link is not active on the whole tab only on anchor text

Created on 1 Oct 2020  ·  3Comments  ·  Source: NG-ZORRO/ng-zorro-antd

Reproduction link

https://stackblitz.com/edit/angular-xmgl6x?file=src/app/app.component.ts

Steps to reproduce

  1. Have a NzTabSet with nzRouterLink directive
  2. Click on the edge of a tab, whithin the tab.

What is expected?

The router navigation should occur.

What is actually happening?

The tab is activated but there is no router navigation.

| Environment | Info |
|---|---|
| ng-zorro-antd | 10.0.0 |
| Browser | Chrome 85 and Firefox 82 |


If you click on the anchor text, the navigation is activated.
The pointer changes over the tab but the link is not active unless you hover the anchor text.
There is a "padding: 8px 16px" surrounding the anchor element within the tab element. It is a direct cause of the issue.

It was working in 9.3.x version.
It can also be reproduced within the Tab component documentation (reproduction is a direct copy/paste of the documentation code sample).

Tabs

Most helpful comment

@VincentRoth use the temporary solution to fix, and remove it in next version:

.ant-tabs-dropdown-menu-item a[nz-tab-link] {
  position: relative !important;
}

a[nz-tab-link] {
  position: static !important;
}

All 3 comments

I have also same issue!

About 3 weeks passed but no information yet! It`s pity that other tiny bugs fixed in 2 minor release and this issue ignored.

@VincentRoth use the temporary solution to fix, and remove it in next version:

.ant-tabs-dropdown-menu-item a[nz-tab-link] {
  position: relative !important;
}

a[nz-tab-link] {
  position: static !important;
}

Was this page helpful?
0 / 5 - 0 ratings