Alignment of content

[Wally]

Hi,
is there a way to hack alignment of content into streamlit? It would be great if we could align content within the main app-container, a st.container or a st.columns to the left/center/right.
I already found this issue on Github, but it doesn’t seem like this is on the radar at the moment: Content alignment option for Text elements · Issue #4109 · streamlit/streamlit · GitHub
Also this issue is related: Aligning of Streamlit widgets! · Issue #1799 · streamlit/streamlit · GitHub

Is there a way to somehow “hack” this behaviour using CSS?

MWE:

import streamlit as st

st.set_page_config(layout='wide')

col1, col2 = st.columns(2)
with col1:
    st.markdown('Some markdown on the left')
with col2:
    st.button('Some button on the right')  # -> how to align this button to the far right?

[Shawn_Pereira]

Hi @Wally , you could probably define 3 columns as below:

col1, inter_cols_pace, col2 = st.columns((x, y, z))

Where:
x is the width that your markdown content requires.
y is the width that your button requires, and
inter_cols_pace is the width of the space you require in-between the 2 column outputs.

Something like:
col1, inter_cols_pace, col2 = st.columns((2, 8, 2))

You’ll need to experiment as required.

Cheers

[edsaac]

Using the nth-of-type() selector (:nth-of-type() - CSS: Cascading Style Sheets | MDN) comes to mind to style only certain elements of the same class.

import streamlit as st

st.set_page_config(layout='wide')

st.markdown(
    """
    <style>
        div[data-testid="column"]:nth-of-type(1)
        {
            border:1px solid red;
        } 

        div[data-testid="column"]:nth-of-type(2)
        {
            border:1px solid blue;
            text-align: end;
        } 
    </style>
    """,unsafe_allow_html=True
)

col1, col2, col3 = st.columns(3)

with col1:
    """
    ## Column 1 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore 
    magna aliqua. Volutpat sed cras ornare arcu dui vivamus.
    """
with col2:
    """
    ## Column 2
    Stuff aligned to the right
    """
    st.button("➡️")
with col3:
    """
    ## Column 3
    This column was untouched by our CSS 
    """
    st.button("🐈")

[Wally]

Hi @edsaac,
sorry for replying late, yet thank you very much. That solved the problem for me or at least gave me some inspiration as to how to tackle this problem. I was able to right align a single st.button within a column.

Related question:
Is it even possible to align two streamlit widgets side-by-side within a st.column using CSS? Like so:

Since you cannot nest columns, which would solve this problem, I was wondering whether this might be possible with some custom CSS?