diff --git a/css/backoffice/layout/tab-container/_tab-container.scss b/css/backoffice/layout/tab-container/_tab-container.scss index 1b4424e89..f946ae007 100644 --- a/css/backoffice/layout/tab-container/_tab-container.scss +++ b/css/backoffice/layout/tab-container/_tab-container.scss @@ -118,13 +118,14 @@ $ibo-tab-container--tab-container--last--min-height: 60vh !default; } .ibo-tab-container--extra-tabs-list { - position: absolute; - z-index: 1; - top: calc(100% + 6px); - right: 12px; + position: fixed; + z-index: 10; /* To be above linkedset datatables */ + /* top: Must be computed on menu opening, if set back to absolute, value must be calc(100% + 6px); */ + /* right: Must be computed on menu opening, if set back to absolute, value must be 12px; */ max-height: $ibo-tab-container--extra-tabs-list--max-height; display: flex; flex-direction: column; + overflow-y: auto; background-color: $ibo-tab-container--extra-tabs-list--background-color; border-radius: $ibo-tab-container--extra-tabs-list--border-radius; @@ -136,7 +137,9 @@ $ibo-tab-container--tab-container--last--min-height: 60vh !default; max-width: $ibo-tab-container--extra-tab-toggler--max-width; color: $ibo-tab-container--extra-tab-toggler--text-color; + @extend %ibo-text-truncated-with-ellipsis; + overflow-x: clip; /* For unknown reason yet, this is necessary otherwise the element will have almost no height */ &:hover, &:active { diff --git a/js/layouts/tab-container/tab-container.js b/js/layouts/tab-container/tab-container.js index 45792e671..7040529ac 100644 --- a/js/layouts/tab-container/tab-container.js +++ b/js/layouts/tab-container/tab-container.js @@ -262,6 +262,16 @@ $(function() // Prevent anchor default behaviour oEvent.preventDefault(); + // Compute list position + // Note: Arbitrary +6px for the position as we don't want it to be exactly against the toggler + let fTopOffset = this.element.find(this.js_selectors.extra_tabs_list_toggler).offset().top + this.element.find(this.js_selectors.extra_tabs_list_toggler).outerHeight() + 6; + // We need to compute position from the right side of the screen because at this time the list isn't visible and we can't know its width, so we can't position it regarding the left side of the screen + // Note: We use window.innerWidth instead of outerWidth as we need the width of the actual viewport, not the OS browser window + let fRightOffset = window.innerWidth - this.element.find(this.js_selectors.extra_tabs_list_toggler).offset().left - this.element.find(this.js_selectors.extra_tabs_list_toggler).outerWidth(); + this.element.find(this.js_selectors.extra_tabs_list) + .css('top', fTopOffset + 'px') + .css('right', fRightOffset + 'px'); + // TODO 3.0.0: Should/could we use a popover menu instead here? this.element.find(this.js_selectors.extra_tabs_list).toggleClass(this.css_classes.is_hidden); },