I tried use sidebar with data table inside

[miguedev1047]

Hello, I don't know if it's my mistake or the sidebar component's error, but when I try to use the component within a its size does not adjust well, causing a horizontal scroll to appear at the bottom

2024-10-26.10-13-13.mp4

Here I attach a video with my project, I have the same problem with the horizontal scroll

<SidebarProvider> <PanelSidebar /> ... <main className='w-full'>{children}</main> </SidebarProvider>
And this is the structure that I manage

[henriquemtn]

Hi, In my case works only using overflow-hidden inside of main content className.

[beysach]

  <SidebarProvider>
    <AppSidebar />
    <SidebarInset className="overflow-hidden">
      <Header />
      <div className="flex-1 flex flex-col mx-auto p-6 w-full">{children}</div>
    </SidebarInset>
  </SidebarProvider>
);```

[miguedev1047]

I did something more complex from the sidebar component that worked for me anyway, but this solution is simpler

[Ousbaiy]

it was frustrating debugging this issue all day. thank you

[emretfn]

When we do this, we cannot use sticky header. I don't want to use fixed, I will use other elements on the page as sticky. Do you have a solution for this?

[kazi331]

  <SidebarProvider>
    <AppSidebar />
    <SidebarInset className="overflow-hidden">
      <Header />
      <div className="flex-1 flex flex-col mx-auto p-6 w-full">{children}</div>
    </SidebarInset>
  </SidebarProvider>
);```

Thank you so much bro. It saves my hours to debug.

[Emirhanyld]

When we do this, we cannot use sticky header. I don't want to use fixed, I will use other elements on the page as sticky. Do you have a solution for this?

A little late but if someone is still looking for a solution you can use "contain-inline-size" instead of "overflow-hidden". It worked on my project.

[FaiJai]

Try to add a overflow-x-hidden to the pink div. If you want it able to scroll vertically as well, use overflow-x-hidden overflow-y-auto