Maximize custom component

🎈 Using Streamlit
1

Hello,

I am creating a custom plotly.js component for Streamlit. So far so good.

I have a question about the possibility to maximize my custom component. Streamlit’s plotlyChart component shows the “View fullscreen” button (see below)

image

Is it possible to add the same functionality to a custom component? I haven’t found anything useful in neither the documentation nor the componenet-lib.

Can this be done?

Thanks!

RJ

2

Hi @robotj

The st.plotly_chart method has the use_container_width parameter that when set to True can occupy the page’s width.

The components also has parameters for adjusting the width and height as well as it’s embedded inside an iframe.

Hope this helps.

3

you use simple CSS for this the hope the example below helps

st.markdown('''
            <style>
            .fullHeight {height : 80vh;
                  width : 100%}
            </style>''', unsafe_allow_html = True)

container = st.container()

container.markdown("<iframe scr='linke', class = 'fullHeight'></iframe>", unsafe_allow_html = True)
4

Thanks for the answer, however this was not exactly what I was looking for.

I wanted to set the same behavior other Streamlit componenets already offer without the need to implement maximization myself, which would not be trivial.

5

Well, this does set the component to be fullscreen by default. This is not exactly what I wanted.
Thank you anyway!