I'm trying out the streamlit-on-Hover-tabs component. Not working as expected

Using Streamlit
1

Summary

Hi,

I’m trying out the streamlit-on-Hover-tabs component. I’m just reproducing the example that is on the readme file of the repo. It works as expected. However, as you can see in the photo provided, the default sidebar still appears (the gray shadow) and there is no toggle x or button to close it.

image
image1561×717 25.3 KB

I believe I followed all the instruction.
I installed the following

pip install streamlit-on-Hover-tabs

I used the code below.

I also included the style.css file in my directory.

Is there another step I’m missing?

from st_on_hover_tabs import on_hover_tabs
import streamlit as st

st.header("Custom tab component for on-hover navigation bar")
st.markdown('<style>' + open('./style.css').read() + '</style>', unsafe_allow_html=True)


with st.sidebar:
    tabs = on_hover_tabs(tabName=['Dashboard', 'Money', 'Economy'], 
                         iconName=['dashboard', 'money', 'economy'], default_choice=0)


if tabs =='Dashboard':
    st.title("Navigation Bar")
    st.write('Name of option is {}'.format(tabs))

elif tabs == 'Money':
    st.title("Paper")
    st.write('Name of option is {}'.format(tabs))

elif tabs == 'Economy':
    st.title("Tom")
    st.write('Name of option is {}'.format(tabs))

Thanks for the help

Debug info

  • Streamlit version: 1.13.0
  • Python version: Python 3.10.7
2

This seems to be a problem that was introduced with Streamlit version 1.12.0. If you install version 1.11.0 or earlier this won’t happen. I haven’t figured out what the actual issue is yet.

3

Inspect the app in your browser and look for the element that is the sidebar. If you find the correct element, try change the number in the field max-width to a different number to see if the grey part gets resized. If it does, you have the right element. In my app, this happens to be .css-110bie7.e1fqkh3o11

image

Then in your style.css file, add this but change the value to whatever will hide the grey part:

.css-110bie7.e1fqkh3o11 {
    max-width: 258px;
}
4

For a longer term solution - using the class may be ineffective as this keeps changing with new updates - use this

1 Like
5

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.