Cannot click the other elements

[oimos]

When it render react-sidebar component, it becomes that I cannot click any elements in the page.
Since the root element has the default style, it sets the layer above the other elements.
Am I missing something to configure?

root: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    overflow: "hidden"
  },

[lutherbarragan]

I'm having the same problem, did you find a solution to this?

[yfery]

Same problem. Anyone have found a solution?

[saurabh-codeword]

wrap the whole content in Sidebar to make everything clickable

[saurabh-codeword]

but the new problem is now your whole app is in absolute

[TkDodo]

You can overwrite the root styles, turning off position:absolute like this:

<Sidebar styles={{ root: { position: undefined } }} />

[gregoftheweb]

The ROOT override didn't work. Is there another way. This component is super awesome, but I can't use it until it lets the other page elements get clicks.

Thanks,
g

[warteamx]

Same problem. For me elements such as buttons and links are clickable, however the input text form is not working.
The root override didn´t work for me too.

[dimytrius]

The root override didn´t work for me too.

[ronkot]

The problem seems to be absolute positioning which makes the component to be rendered on top of all other content. I don't know how this component should be used with the default styles to make it work, but it's possible to remove the absolute positioning.

The following style overrides worked for me:

styles={{
  root: {position: undefined},
  content: {position: undefined}
}}

EDIT: Hmm.. this fixes the cannot-click-other-content problem, but breaks the layout (menu content is shown even when the menu is in closed state). Have to investigate more.

[michael-digi]

Just chiming in to say I'm experiencing the same problem - I have a google maps div with three buttons outside of it (I plan to style them on top of the map somewhere most likely, just in a rough version testing functionality). I love the sidebar component but yeah it breaks all the buttons that I currently have no matter where I arrange the components.

[cgcullen]

I'm having the same problem. Nothing else is clickable :(

[ronkot]

I finally ended up doing as @saurabh-codeword suggested - wrapped the whole app as a child of react sidebar component. Broke the beauty of my app structure and required to rewrite part of my css to work with absolute positioning, but finally got it work. I just wonder if this is the intended way to use the library 🤔

[cgcullen]

That didn't work for me @ronkot. Moving on to a different plugin :( I like this one, but it's unusable when it blocks the page.

[TkDodo]

I will try to come up with a fiddle today. We are using multiple react-sidebars in our app, and everything works fine 🤷‍♂

[TkDodo]

So here is (roughly) how we are using the Sidebar as a Drawer: https://codesandbox.io/s/agitated-cloud-l2dym

I am not having any issues with that setup.

[ekozelkova]

Thank you @TkDodo! This fiddle worked for me. This fix should probably be referenced in docs.

[cgcullen]

I got it to work by putting the sidebar around my whole page component instead of just the header component.

[Louis345]

@cgcullen Thank you for your comment it helped me solve the problem. Thanks.

[idiglove]

So here is (roughly) how we are using the Sidebar as a Drawer: https://codesandbox.io/s/agitated-cloud-l2dym

I am not having any issues with that setup.

styles={{ 
                sidebar: { 
                    position: "fixed"
                },
                root: {
                    position: "undefined"
                },
                content: {
                    position: "undefined",
                    top: "undefined",
                    left: "undefined",
                    right: "undefined",
                    bottom: "undefined"
                }
            }}

these styles worked for me