Shadcn's new Sidebar covering (overlapping) any header or navbar #5636
Replies: 5 comments 1 reply
-
|
Have you tried putting the overlapped elements inside the sidebar provider? I am currently experimenting with it as well and it seems that anything outside the sidebarprovider gets overlapped. I have done it this way |
Beta Was this translation helpful? Give feedback.
-
|
I made this attempt, I added the provider to the root of my application, it worked the same in my opinion |
Beta Was this translation helpful? Give feedback.
-
|
Hello! How are you? Sorry for this probably stupid question, but I don't fully know about front topis 😅 I have a similar issue with Sidebar component integrating ReacFlow, I get this
I tried to modify Tailwind, CSS, and make a div, but nothing happened. If I remove the group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebarAll works fine. I change the order of in/out but, it doesn't work either. Could you solved? Thanks in advance! |
Beta Was this translation helpful? Give feedback.
-
|
I still have the same problem, the sidebar, when opened, covers the header of my application, even though it is a parent element of the sidebar, has anyone found a solution for this? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @ViniciusPilati2005 ! Maybe this helps you page.tsx'use client'
import React from 'react'
import { Provider } from 'react-redux'
import { store } from '@/lib/store'
import { SidebarProvider } from '@/components/ui/sidebar'
import AppContent from '@/components/AppContent'
const App: React.FC = () => {
return (
<Provider store={store}>
<SidebarProvider>
<AppContent />
</SidebarProvider>
</Provider>
)
}
export default AppAppContent.tsxreturn (
<>
<SidebarInset className="flex-grow relative">
<Toolbar />
<Canvas />
</SidebarInset>
{isSidebarVisible && <ElementSidebar element={element} />}
<Toast />
</>
) |
Beta Was this translation helpful? Give feedback.
-
|
Same issues, It covering |
Beta Was this translation helpful? Give feedback.
-
Sidebar overlapping with header
Shadcn's new Sidebar component seems to cover any header or navbar. I was playing with the z index but can't make it work no matter how I try.
my current layout structure looks like this:
I tried to add z index in the Navbar component and Sidebar Component which is found in the app-sidebar.tsx file. But it didn't work.
Also how can I make the sidebar to scroll with the main content instead of fixed and sticky? Please help!
Beta Was this translation helpful? Give feedback.
All reactions