Trying to right allign a st.toggle()

Using Streamlit
1

i have used the below code

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;
        }
        .toggle-container {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 10px; # Adjust spacing between text and toggle
        }
    </style>
    """, unsafe_allow_html=True)

col1, col2 = st.columns(2)

with col1:
    search_button = st.button("Search")

with col2:
    st.markdown('<div class="toggle-container">', unsafe_allow_html=True)
    st.write("Advanced Search")
    toggle_search_method = st.toggle("", value=st.session_state.search_method, help="More detailed results but at a longer execution time")
    st.markdown('</div>', unsafe_allow_html=True)

the text button seems to be alligning to right but not the toggle what could be the issue here?

image
image1796×261 11 KB

2

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.