This is an automated email from the ASF dual-hosted git repository.
chanholee pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/zeppelin.git
The following commit(s) were added to refs/heads/master by this push:
new b4193a072e [ZEPPELIN-6384] Fix dropdown menu item links not clickable
in full area
b4193a072e is described below
commit b4193a072eda5dacae9a7ce29140aa38c21b5c75
Author: ChanHo Lee <[email protected]>
AuthorDate: Sun Apr 5 14:59:14 2026 +0900
[ZEPPELIN-6384] Fix dropdown menu item links not clickable in full area
### What is this PR for?
#### Summary
- Fixed dropdown menu items in header where only text was clickable instead
of the full item area
- Changed routerLinkActive to nzMatchRouter for proper NG-ZORRO integration
- Added CSS pseudo-element to expand clickable area of anchor tags
#### Cause
- Likely due to NG-ZORRO dropdown menu item anchor tag style changes that
reduced the clickable area to just the text content.
#### Changes
- Updated `header.component.html`: Replace `routerLinkActive` with
`nzMatchRouter` directive
- Updated `global.less`: Add `::before` pseudo-element to
`.ant-dropdown-menu-item > a` to expand clickable area using absolute
positioning
### What type of PR is it?
Bug Fix
### What is the Jira issue?
https://issues.apache.org/jira/browse/ZEPPELIN-6384
### Questions:
* Does the license files need to update? No
* Is there breaking changes for older versions? No
* Does this needs documentation? No
Closes #5124 from tbonelee/fix-dropdown-link.
Signed-off-by: ChanHo Lee <[email protected]>
---
.../src/app/share/header/header.component.html | 10 +++++-----
zeppelin-web-angular/src/styles/global.less | 8 ++++++++
2 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/zeppelin-web-angular/src/app/share/header/header.component.html
b/zeppelin-web-angular/src/app/share/header/header.component.html
index f0dd608aff..d77aa12df7 100644
--- a/zeppelin-web-angular/src/app/share/header/header.component.html
+++ b/zeppelin-web-angular/src/app/share/header/header.component.html
@@ -52,19 +52,19 @@
<ul nz-menu>
<li nz-menu-item (click)="about()">About Zeppelin</li>
<li nz-menu-divider></li>
- <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
+ <li nz-menu-item nzMatchRouter>
<a [routerLink]="['/interpreter']">Interpreter</a>
</li>
- <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
+ <li nz-menu-item nzMatchRouter>
<a [routerLink]="['/notebook-repos']">Notebook Repos</a>
</li>
- <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
+ <li nz-menu-item nzMatchRouter>
<a [routerLink]="['/credential']">Credential</a>
</li>
- <!-- <li nz-menu-item
routerLinkActive="ant-dropdown-menu-item-selected">-->
+ <!-- <li nz-menu-item nzMatchRouter>-->
<!-- <a [routerLink]="['/helium']">Helium</a>-->
<!-- </li>-->
- <li nz-menu-item routerLinkActive="ant-dropdown-menu-item-selected">
+ <li nz-menu-item nzMatchRouter>
<a [routerLink]="['/configuration']">Configuration</a>
</li>
<ng-container *ngIf="ticketService.ticket.principal !== 'anonymous'">
diff --git a/zeppelin-web-angular/src/styles/global.less
b/zeppelin-web-angular/src/styles/global.less
index 42e736228c..b72478b783 100644
--- a/zeppelin-web-angular/src/styles/global.less
+++ b/zeppelin-web-angular/src/styles/global.less
@@ -115,6 +115,14 @@
}
}
+// Fix `a` tag in nz-dropdown-menu to be clickable with full width
+.ant-dropdown-menu-item > a::before {
+ position: absolute;
+ inset: 0;
+ background-color: transparent;
+ content: '';
+}
+
//.view-lines {
// .view-line {
// &:first-child {
