Bug Description
When the SideNavigation is in collapsed state and has items in the top section and in the fixed bottom section we see an issue when the window height is shrunk.
When the first items of the top group start overflowing into the items of the bottom group, the overflown items are not hidden behind the "..." overflow menu, but they overlap with the bottom group.
When the window height is reduced further, the items start to disappear into the "..." overflow menu
Affected Component
SideNavigation
Expected Behaviour
When the top group starts overflowing into the bottom group, the items are immediately hidden behind the "..." overflow menu and never overlap with the bottom group.
Isolated Example
No response
Steps to Reproduce
- Have a SideNavigation with items in the top group and items in the bottom group
- Start shrinking the window height
- When the items of the top group start to overflow we see that they overlap with the items of the bottom group
Log Output, Stack Trace or Screenshots
I think I've traced the issue the _updateOverflowItems() function in SideNavigation.js .
To me it looks like the root cause is that the calculation of the itemsHeight does not include the margins between the items in the SideNav.
let itemsHeight = overflowItems.reduce((sum, itemRef) => {
if (!itemRef) {
return sum;
}
itemRef.classList.remove("ui5-sn-item-hidden");
return sum + itemRef.offsetHeight;
}, 0);
as the offsetHeight does not contain the margin of an element.
Imo, this causes the broken overflow behavior when the user has a scroll position where the top items box is just big enough to fit all items (without their margins) Then the JS function thinks there is enough space for the items, while in the browser they already overflow.
So I think we could fix this issue by also taking the items margin into account in above function.
Priority
Medium
UI5 Web Components Version
2.23.1
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration
Bug Description
When the SideNavigation is in collapsed state and has items in the top section and in the fixed bottom section we see an issue when the window height is shrunk.
When the first items of the top group start overflowing into the items of the bottom group, the overflown items are not hidden behind the "..." overflow menu, but they overlap with the bottom group.
When the window height is reduced further, the items start to disappear into the "..." overflow menu
Affected Component
SideNavigation
Expected Behaviour
When the top group starts overflowing into the bottom group, the items are immediately hidden behind the "..." overflow menu and never overlap with the bottom group.
Isolated Example
No response
Steps to Reproduce
Log Output, Stack Trace or Screenshots
I think I've traced the issue the
_updateOverflowItems()function inSideNavigation.js.To me it looks like the root cause is that the calculation of the itemsHeight does not include the margins between the items in the SideNav.
as the offsetHeight does not contain the margin of an element.
Imo, this causes the broken overflow behavior when the user has a scroll position where the top items box is just big enough to fit all items (without their margins) Then the JS function thinks there is enough space for the items, while in the browser they already overflow.
So I think we could fix this issue by also taking the items margin into account in above function.
Priority
Medium
UI5 Web Components Version
2.23.1
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration