Closed MahmoudSaidHaggag closed 11 months ago
Can you share a screenshot of the problem?
Before update mobileItemStyle
After update mobileItemStyle
@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" />
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.
@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.
Added in v5.2.12
@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.