Since 1.47, the last option of a pills widget is pushed to a new line

Using Streamlit
, , ,
1

Hello everyone,

There seems to be a case when the last option of a pills widget is always pushed to a new line instead of being displayed on the same line next to other options.

My application was working fine until I upgraded to Streamlit 1.47 and it started to show this weird behavior. It took me a couple hours to remove every part of the app one by one until I came up with this minimal reproducible example:

import streamlit as st

test = st.pills("Pills outside form", ["A"])

with st.form("form"):
    selected_languages = st.pills("Pills inside form", ["A", "B", "C", "D", "E"])
    submitted = st.form_submit_button("Submit", type="primary")

Here is how this shows up (correctly) with Streamlit versions up to 1.46.1:

image
image655×212 5.24 KB

And here is the new layout since 1.47.0. Whatever the number of options (greater than 5 it seems), the last option will always be displayed on a new line:

image
image657×235 5.62 KB

If you remove the pill which is located outside the form, the layout is displayed correctly. I’m not sure whether the problem is the part outside the form, or the presence of pills both outside and inside the form, or any other problem…

In the Chrome inspector, unchecking both .st-bh and .st-bg property ‘margin-right’ “solves” the problem.

image
image814×285 15.3 KB

2

This is a bug with the new flex options, which you can upvote here: st.pills incorrectly adding line breaks on the last option (if the a previous pill above it has exactly 1 option) · Issue #12067 · streamlit/streamlit · GitHub

Meanwhile, you can temporarily get around the issue by setting the width of pills:

import streamlit as st

test = st.pills("Pills outside form", ["A"])

with st.form("form"):
    selected_languages = st.pills("Pills inside form", ["A", "B", "C", "D", "E"], width=200)
    submitted = st.form_submit_button("Submit", type="primary")