Sidenav scrollcontainer

Topic: Sidenav scrollcontainer

madinaharabic premium asked 5 days ago

Expected behavior*_Sidenav scrollcontainer respects specified hight_*Actual behavior*_Scroll works but Sidenav height is taking the whole page instead of container's height_*Resources (screenshots, code snippets etc.)

We initialize Sidenav like below:

const options = {
    sidenavAccordion: !1,
    sidenavBackdrop: !1,
    sidenavCloseOnEsc: !1,
    sidenavColor: "success",
    sidenavContent: '#content',
    sidenavScrollContainer: '#scroll-container',
    sidenavHidden: !1,
    sidenavMode: "side",
    sidenavPosition: "relative",
    sidenavWidth: 260
};

and the Sidenav ui:

nav id="thesidenav" class="relative bg-white w-[260px] h-[400px] z-[1035] rounded-lg overflow-hidden shadow-[0_4px_12px_0_rgba(0,0,0,0.07),_0_2px_4px_rgba(0,0,0,0.05)] dark:bg-zinc-800"> div id="scroll-container" class="overflow-hidden h-[400px]"> ul class="relative m-0 list-none p-0 rounded-lg h-[400px]"> ... /ul> /div> /nav>

and here's the result:

Sidenav scrollcontainer

The scrolling works but the Sidenav extends its height till the end of the page ignoring the h-[400px] specified everywhere.

Add comment

Igor Przybysz staff answered 5 days ago

0 0 Best answer

Hi, try adding the !important directive to your nav element's height class like this !h-[400px]. The ! prefix in Tailwind CSS adds the !important modifier to the class, which should override any existing height styles. Let me know if this resolves your issue.

Please insert min. 20 characters.