Radio widgets display direction

Using Streamlit
1

Hi, I wonder if anyone knows the solution to this?

  1. The st.radio widget displays vertically by default.
  2. This widget can be made to display horizontally too. (Link: Horizontal radio buttons).
    However, doing so will change all the other radio widgets on the page to horizontal.
  3. Is there a way to show the 1st radio widget as vertical, the 2nd radio widget as horizontal, and so on?

Use case: vertical radio widget in the sidebar and horizontal radio widget in the main section.

Thanks in advance.

2

i had the same issue recently and find a workaround the time streamlit release something more suitable (like menu widget)

def st_radio_horizontal(*args, **kwargs):
    """Trick to have horizontal st radio to simulate tabs"""
    col, _ = st.columns(2)
    with col:
        st.write('<style> div[data-testid=column] > div > div > div > div.stRadio > div{flex-direction: row;}</style>', unsafe_allow_html=True)
        return st.radio(*args, **kwargs)

the trick is to wrap the radio button in a column containers and only apply the style in this case.

3

Thanks @pierreh , your solution worked perfectly.

Curiously, this didn’t work outside the function, even though I used columns (as below)

sc1, sc2 = st.columns(2)
with sc1:
	st.radio("My 1st radio options", ("A", "B", "C"), key="r1")

with sc2:
     st.write(' div[data-testid=column] > div > div > div > div.stRadio > div{flex-direction: row;}', unsafe_allow_html=True)

    st.radio("My 2nd radio options", ("D", "E", "F"), key="r2")
God Bless...
4

looks like you are missing the style tag no ?

5

Naah, the copy-paste deletes some text. It doesnt work even if you put the style tag in.

Thanks nonetheless, for your expertise. :slight_smile:

Cheers

6

Cleaner way is to change the flex direction via css.
Find the class name and add a markdown with this:

custom_css = """
<style>
{
   .st-b3.st-bc.st-bd.st-be.st-bf.st-bg {
       flex-direction: row;
}
</style>"""
st.markdown(custom_css, unsafe_allow_html=True)
7

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