Update Mobile Item Style

[Mahmoud Haggag]

@yaminncco Please, when i hover on item in collapsed mode (as bottom item), sub menu hide in screen

Can please update mobileItemStyle computed to prevent this problem with

mobileItemStyle () {
let dropdownStyle = [{position: "absolute"}, {width: "100%"}, {"overflow-y": "auto"}, {"max-height": "600px"}];
if (this.mobileItemPos > 400) dropdownStyle.push({bottom: "50px"});
else dropdownStyle.push({top: this.mobileItemHeight + "px"});
return {
dropdown: dropdownStyle,
}
}

Thank you in advance.

[yaminncco]

Can you share a screenshot of the problem?

[Mahmoud Haggag]

Before update mobileItemStyle

After update mobileItemStyle

[Mahmoud Haggag]

@yaminncco this is updated code

mobileItemStyle () {
let dropdownStyle = [{position: "absolute"}, {width: "100%"}, {"overflow-y": "auto"}, {"max-height": "600px"}];
if (this.mobileItemPos > 400) dropdownStyle.push({bottom: "50px"});
else dropdownStyle.push({top: this.mobileItemHeight + "px"});
return {
item: [{position: "absolute"}, {top: this.mobileItemPos + "px"}, this.rtl ? {right: "0px"} : {left: "0px"}, this.rtl ? {"padding-right": this.sidebarWidth} : {"padding-left": this.sidebarWidth}, this.rtl && {direction: "rtl"}, {"z-index": 0}, {width: this.parentWidth - this.parentOffsetLeft + "px"}, {"max-width": this.width}],
dropdown: dropdownStyle,
background: [{position: "absolute"}, {top: "0px"}, {left: "0px"}, {right: "0px"}, {width: "100%"}, {height: this.mobileItemHeight + "px"}, {"z-index": -1}]
}
}

====================== By Passing this params =====================
<sidebar-menu
ref="menu"
:menu="menu"
:collapsed="isCollapse"
:relative="true"
widthCollapsed="60px"
theme="white-theme"
@toggle-collapse="onToggleCollapse"
:rtl="isRTL"
/>

[yaminncco]

A temporary solution is to add some extra space after the last item with CSS so that the user can scroll and have more space for the dropdown.

[Mahmoud Haggag]

@yaminncco, But the problem has already been solved, and I have explained the solution above. All I want from you is to include it in the official version of this library after actually testing it.

[yaminncco]

Added in v5.2.12