SideBar css styling & scroll bar disapearing

[BFAGIT]

Hey guys,

I've been trying to apply Css styling to the Sidebar to make the scroll bar disapear and appear when we hover over the side bar.

I've tried applying css styling to the sidebar but this doesn't seem possible as no styling options are available for it, I looked and the compoenent definition and the docs.

I was able to apply it to the AppLayout but the custom css styling is then only applied to general frame and not to the sidebar.

Here is a simple example, note that I've only added the css styling for firefox but I observe the same behaviour with other browers to.

import solara

css = """
  .scroll-bar{
    overflow-y: auto; /* Enables vertical scrolling */
    scrollbar-width: none; /* For Firefox */
  }
  .scroll-bar:hover {
    scrollbar-width: auto; /* For Firefox */
  }
    """

@solara.component
def Page():
    with solara.Sidebar():
        with solara.Card("Select Charting options"):
            for i in range(30):
                solara.Info(f"{i}")
    """with solara.AppBar():
        pass"""

    with solara.Card("Select Charting options"):
            for i in range(30):
                solara.Info(f"{i}")

@solara.component
def Layout(children):
    solara.Style(css)
    solara.AppLayout(children=children, classes=["scroll-bar"])

Edit: I actually looked a bit at the AppLayout and the style feature seems to be a possibility to. The style doesn't seem to set to the sidebar component. I looked at the code very quickly.

NB this is definitly not an important request or question just i came accross it and became curios :)

Thanks again and have a good week :)

[maartenbreddels]

For scrolling I usually pick Firefox, if you do "inspect element" you should see sth like:

Note the purple text on the left "scrolling", which tells you which element does the scrolling. Since that already has a CSS class (v-navigation-drawer__content), we can use that:

import solara

css = """
  .v-navigation-drawer__content{
    overflow-y: auto; /* Enables vertical scrolling */
    scrollbar-width: none; /* For Firefox */
  }
  .v-navigation-drawer__content:hover {
    scrollbar-width: auto; /* For Firefox */
  }
    """

@solara.component
def Page():
    with solara.Sidebar():
        with solara.Card("Select Charting options"):
            for i in range(30):
                solara.Info(f"{i}")
    """with solara.AppBar():
        pass"""

    with solara.Card("Select Charting options"):
            for i in range(30):
                solara.Info(f"{i}")

@solara.component
def Layout(children):
    solara.Style(css)
    solara.AppLayout(children=children, classes=["scroll-bar"])

Run and edit this code snippet at PyCafe

[BFAGIT]

Thanks @maartenbreddels. This seems stupid now that you have given me the solution aahahah. I didn't think of looking the actual web page component with the the developper tools. I will do now 😉. Thanks