How can we get the screen resolution?

Using Streamlit
1

Is there currently a way to get the screen resolution, or the width and height. I saw this comment https://github.com/streamlit/streamlit/issues/708#issuecomment-623051573 which makes me assume there isn’t, but just checking in case as it would be very helpful in choosing appropriate chart dimensions for the screen size.

It would also be great to get the sidebar width if that’s available, and also if it’s hidden or not.

1 Like
2

Hi @DanGolding, thanks for your patience and welcome to the community!

You’re right, getting arbitrary properties that are easy to accomplish via JavaScript isn’t supported very well (maybe at all, per the issue?). We are releasing functionality to create custom components in the near term, this might be something interesting to try when that arrives. I’m thinking that if a prototype can be developed showing how to pass these values back to Streamlit, it could be a candidate for inclusion in the main library.

Best,
Randy

1 Like
3

Hi @randyzwitch,

I am building a custom component where I want to display different images as React Base Web buttons. Let’s say I want to display three image buttons of same size one next to another filling the whole screen (the aspect would be identical to creating three columns and using col.image(image, use_container_width=True) on each column). In order to do so, I first resize the images in the python code (fixing an image width of screen_width/3), and then each of them is rendered in the front code. For simplicity issues I discard the option of resizing in the front code.

However, at this moment I am hard-coding the screen_width parameter fine-tuned to my display, but I would like to have some kind of responsive streamlit property like screen_width = st.width that adaptively changed as the screen size changed.

I was wondering if there was some update on the matter / intention to release this kind of functionality. Or even if you think there is a workaround solution to my problem.

Thank you very much!

2 Likes
4

Hi @randyzwitch,

I’ve been using Streamlit’s use_container_width feature and it is great.

But it would still be useful to get either the screen resolution or container width, as suggested by Marina:

container_width = st.get_container_width
screen_width = st.screen_width

For example, when rendering a chart, users may want to set different font sizes (or different x-axis bounds) for desktop or mobile views.

Best,

Emile

1 Like
5

Also, use_container_width does not work well with st.altair_chart in case of concatenated charts (i.e. horizontal facets), where the width gets passed to a subplot rather than the compound one. I suppose the problem is on altair’s rather than streamlit’s side, but being able to get the container width would allow to pass it to plotting script in order to set the appropriate plot dimensions. Same goes for square heatmaps — use_container_width rescales the x-axis to fit the container width, but since height will not get passed to altair, the result is not a square but a rectangle.

2 Likes