Next.js Discord

Discord Forum

Cannot get rid of Scrollbars

Answered
Yellow croaker posted this in #help-forum
Open in Discord
Yellow croakerOP
I am at the beginning of a project made with NextJS, React and ShadcnUI. It has a small sidebar component and a canvas on the right of the sidebar. My canvas is supposed to take up all the remaining space next to the sidebar. Unfortunately, I get scroll bars all the time, no matter how I scale things and I dont know how to get rid of them. I dont want to hide the overflow, because I would rather just not have things larger than they are supposed to be.

Here are my layout and page tsx files:
page.tsx
export default function Home() {
  return (
    <div className="w-full h-full overflow-hidden relative">
      <MapCanvas width={50} height={50} />
    </div>
  )
}


layout.tsx
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className="h-screen w-screen">
        <SidebarProvider>
          <SidebarInset>
            <ToolSidebar />
            <main className="h-full w-full relative">
              <SidebarTrigger />
              {children}
            </main>
          </SidebarInset>
        </SidebarProvider>
      </body>
    </html>
  );
}


The MapCanvas is a fancy wrapper around the default canvas element. It does properly scale to the parent container.
Answered by Yellow croaker
Ok the issue was solved by adding flex and flex-col to the div wrapping my canvas. It turns out that the div wasnt aware about the sidebar trigger above it otherwise and would overshoot with the full width.
View full answer

2 Replies

Yellow croakerOP
Update:
I moved the actual Sidebar (ToolSidebar) outside of the Inset. This fixed the horizontal scroll bar, because the inset area is now actually only the area next to the sidebar
Yellow croakerOP
Ok the issue was solved by adding flex and flex-col to the div wrapping my canvas. It turns out that the div wasnt aware about the sidebar trigger above it otherwise and would overshoot with the full width.
Answer