Remove full screen icon for various elements

Using Streamlit
#1

Is there a way to remove the fullscreen icon/action, specifically from images and bokeh plots? I asked about it here, though that may have not been the appropriate place to do so.

For context, I have a logo/icon for my app and it does not make sense to allow users to make this larger. I am also displaying a Bokeh plot that distorts improperly when made full size (due to issues within that library).

It would be really great to simply hide this option from the user, but I haven’t been able to find or devise a solution

1 Like
#2

For the logo/icon question, I think it if you specified the st.image call as st.markdown with image HTML, it probably wouldn’t have the expander. It’s something for us to consider though, there should at least be the option to turn it off.

Unsure about Bokeh…in the link to the other question, it looks like it might be disabled with CSS, but that’s a pretty fickle solution.

1 Like
#3

I was able to mostly solve both of these issues by writing some CSS:

hide_full_screen = '''
<style>
.element-container:nth-child(3) .overlayBtn {visibility: hidden;}
.element-container:nth-child(12) .overlayBtn {visibility: hidden;}
</style>
'''

st.markdown(hide_full_screen, unsafe_allow_html=True)

I dont know html/CSS so I dont totally understand what I did here, and accessing the elements via nth-child is sub-optimal since if different input options are selected, the element-containers have different “n” values. Is there a less hard-coded solution to access these elements?

#4

+1 for this one! A way to turn off the interactivity for an image with a property would be amazing!

At first I was trying to set a nice round logo as first thing to see on a landing page but found there isn’t yet an image shaping property in the st.image (like: st.image(shape=“circle”, from_edge=“1em”) for instance) so I made it round myself.
After that I noticed there wasn’t an easy way to center-align the image (like: st.image(align=“center”) for instance) on the main view so that made it look weird.

I thought since the sidebar is small it might center the bigger image automatically and it kind of did but not perfectly, after searching the API reference I found that use_column_width=“always” actually centered it!(so will try that for the main view now) but I could still see the the little “view full screen icon” when hovering over it which might seem like a buggy experience for some users as can been seen on the top-right here:
Screenshot from 2021-05-15 16-25-22

I’ll actually take a look into the repo and see if I can help with the streamlit project. Got a lot of ideas to make it awesome for both the data science and webapp dev world.
Streamlit is so darn awesome, I wish I found it sooner!