composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-13 07:24:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°4918 - Fix "other tabs" menu displayed behind some elements

Browse Source
This commit is contained in:
Molkobain
2022-08-12 14:58:51 +02:00
parent 9bf65da420
commit b91ab8940e
2 changed files with 17 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
css/backoffice/layout/tab-container/_tab-container.scss
View File

@@ -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 {

10
js/layouts/tab-container/tab-container.js
View File

@@ -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);
},