How to move fullscreen-enter icon

Using Streamlit
1

Dear team, users,

How could I decide the place where the ‘fullscreen-enter’ icon appears in the charts? I am having trouble with this when plotting with plotly, as follows:
image

Alternatively, moving the plotly bar options would be valid also.

Thanks in advance!
Germán

2

Hi @GermanCM and welcome to the forum :wave:,

Currently that’s not supported, but we are working on Customizable Layout for Streamlit .
In the meantime you can hack your way around a solution by using st.markdown. Try styling .overlayBtn of the plotly .element-container.

Let me know if you need any help.
And thanks for using Streamlit! :guitar:

3

Thanks for your answer @kantuni. Nevertheless I am afraid I did not get what you exactly mean by using markdown in this context, as I understand markdown is basically for displaying styled text, not interacting with the graph, am I missing anything? Could you elaborate a bit more what you mean?
About styling elements, please consider my main focus is to apply as simple as possible settings, as I am a data science focused guy rather that front-end detailed topics.

Thanks in advance, I love streamlit!

4

Dear @kantuni I made my way around by modifying the width property of the update_layout method of the plotly figure as follows:

     fig_map.update_layout(margin={"r":80,"t":60,"l":0,"b":0}, 
                height=500, width=710, 
                legend=dict(x=-.3, y=0.1))

image

Thanks again for your replies

2 Likes
5

Dear @GermanCM,

One can use <style> (a.k.a internal CSS) inside st.markdown.
This is known as the Markdown HACK.

P.S. Your solution is as good as the one above!

1 Like
6

Is there a way to simply remove the fullscreen view? Im not very versed in CSS, so I wouldn’t where to start on this

8

I was able to write some css to remove the fullscreen button via:

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

st.markdown(hide_full_screen, unsafe_allow_html=True)

Granted, I do not know html/css so I dont totally understand what I did here, and the hard-coded nth-child seems sub-optimal to me, though Im not certain how to access the element any other way

9

You can style the fullscreen button in Streamlit 1.1 like this, using the button[title="View fullsceen"] selector.

style_fullscreen_button_css = """
    button[title="View fullscreen"] {
        background-color: #004170cc;
        right: 0;
        color: white;
    }

    button[title="View fullscreen"]:hover {
        background-color:  #004170;
        color: white;
        }
    """
st.markdown(
    "<style>"
    + style_fullscreen_button_css
    + "</styles>",
    unsafe_allow_html=True,
)
1 Like