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:

Alternatively, moving the plotly bar options would be valid also.
Thanks in advance!
Germán
Hi @GermanCM and welcome to the forum
,
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! 
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!
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))

Thanks again for your replies
2 Likes
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
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
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
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