Vertical divider?

Using Streamlit
,
1

Is there a way to add a vertical divider between columns. Like the st.divider() but vertical?

1 Like
2

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.

  1. 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
  1. styles.css
p {
  border-left-style: solid;
  border-left-color: gray;
  padding-left: 25px;
  }

Hope this helps!

3

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.

4

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.
            '''
        )

1717755259626
1717755259626969Ă—550 75.3 KB

1 Like
5

worked for me, thanks.