Is there a way to add a vertical divider between columns. Like the st.divider() but vertical?
Hi @Odrec
Aside from st.divider()
for horizontal rule as you had mentioned, there is currently no method for a vertical divider. If you’d like to do a feature request, you can do so at Issues · streamlit/streamlit · GitHub
However, in the meantime, it may be possible to use CSS styling, consider the following example code snippets as shown below in the 2 files.
streamlit_app.py
import streamlit as st
with open("styles.css") as f:
st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)
# Other parts of your code goes below here
styles.css
p {
border-left-style: solid;
border-left-color: gray;
padding-left: 25px;
}
Hope this helps!
Hi @dataprofessor,
Can you provide guidelines how to apply it only to a column and not other parts of the app?
The current suggestion to put it on top of the file results in applying the css to all elements, which is undesired. I have also tried to apply it within a column or wrap the column around it, but with no success.
I’m not sure if I can meet your needs, you can try the following methods:
import streamlit as st
with st.container(height=393, border=True):
cols_mr = st.columns([10.9, 0.2, 10.9])
with cols_mr[0].container(height=350, border=False):
st.write("Streamlit is an open-source Python framework for data scientists and AI/ML engineers to deliver dynamic data apps with only a few lines of code. Build and deploy powerful data apps in minutes. Let's get started!")
st.image('https://docs.streamlit.io/images/app_model.png')
with cols_mr[1]:
st.html(
'''
<div class="divider-vertical-line"></div>
<style>
.divider-vertical-line {
border-left: 2px solid rgba(49, 51, 63, 0.2);
height: 320px;
margin: auto;
}
</style>
'''
)
with cols_mr[2].container(height=350, border=False):
st.write(
'''
Now that you know a little more about all the individual pieces, let's close the loop and review how it works together:
- Streamlit apps are Python scripts that run from top to bottom.
- Every time a user opens a browser tab pointing to your app, the script is executed and a new session starts.
- As the script executes, Streamlit draws its output live in a browser.
- Every time a user interacts with a widget, your script is re-executed and Streamlit redraws its output in the browser.
- The output value of that widget matches the new value during that rerun.
- Scripts use the Streamlit cache to avoid recomputing expensive functions, so updates happen very fast.
- Session State lets you save information that persists between reruns when you need more than a simple widget.
- Streamlit apps can contain multiple pages, which are defined in separate .py files in a pages folder.
'''
)
worked for me, thanks.