You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by hn...@apache.org on 2021/09/27 09:46:23 UTC
[myfaces-tobago] 01/02: fix: dropdown menu position
This is an automated email from the ASF dual-hosted git repository.
hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git
commit cacb1ecd1d52e8a6cd087e887f01b9f91269032e
Author: Henning Noeth <hn...@apache.org>
AuthorDate: Mon Sep 27 11:30:42 2021 +0200
fix: dropdown menu position
The dropdown menu inside <tc:bar> should not be appended to the menu store.
---
.../src/main/webapp/content/050-container/10-box/Box.xhtml | 5 +++++
.../tobago-theme-standard/src/main/ts/tobago-dropdown.ts | 13 +++++++++----
2 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/10-box/Box.xhtml b/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/10-box/Box.xhtml
index 1ce6976..db60b11 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/10-box/Box.xhtml
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/050-container/10-box/Box.xhtml
@@ -72,6 +72,11 @@
<tc:buttons>
<tc:button label="Left"/>
<tc:button label="Right"/>
+ <tc:button label="Dropdown" omit="true">
+ <tc:link label="Action 1"/>
+ <tc:link label="Action 2"/>
+ <tc:link label="Action 3"/>
+ </tc:button>
</tc:buttons>
</tc:bar>
</f:facet>
diff --git a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
index 17916ed..295a7aa 100644
--- a/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
+++ b/tobago-theme/tobago-theme-standard/src/main/ts/tobago-dropdown.ts
@@ -39,7 +39,7 @@ class Dropdown extends HTMLElement {
openDropdown(): void {
this.dispatchEvent(new CustomEvent(TobagoDropdownEvent.SHOW));
- if (!this.inStickyHeader()) {
+ if (!this.insideNavbar()) {
this.menuStore.appendChild(this.dropdownMenu);
}
@@ -48,14 +48,19 @@ class Dropdown extends HTMLElement {
closeDropdown(): void {
this.dispatchEvent(new CustomEvent(TobagoDropdownEvent.HIDE));
- if (!this.inStickyHeader()) {
+ if (!this.insideNavbar()) {
this.appendChild(this.dropdownMenu);
}
this.dispatchEvent(new CustomEvent(TobagoDropdownEvent.HIDDEN));
}
- private inStickyHeader(): boolean {
- return Boolean(this.closest("tobago-header.sticky-top"));
+ /**
+ * The bootstrap dropdown implementation doesn't adjust the position of the dropdown menu if inside a '.navbar'.
+ * In this case the dropdown menu should not be appended to the menu store.
+ * https://github.com/twbs/bootstrap/blob/0d81d3cbc14dfcdca8a868e3f25189a4f1ab273c/js/src/dropdown.js#L294
+ */
+ private insideNavbar(): boolean {
+ return Boolean(this.closest(".navbar"));
}
private get dropdownMenu(): HTMLDivElement {