worse alignment between st.button & st.selectbox for v1.24

[iuiu34]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

hi,
in v1.23, with a

st.write("# ")
st.button("test")

you could align horizontally st.button and st.selectbox.
But with v1.24 this doesn't seem possible anymore.

v1.23

v1.24
with st.write('# ')

without

thanks

Reproducible Code Example

No response

Steps To Reproduce

No response

Expected Behavior

No response

Current Behavior

No response

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version:
• Python version:
• Operating System:
• Browser:
• Virtual environment:

Additional Information

No response

Are you willing to submit a PR?

• Yes, I am willing to submit a PR!

[willhuang1997]

@imjuangarcia @sfc-gh-jgarcia is this a part of the core changes do you think?

[sfc-gh-jgarcia]

@willhuang1997 I'm not sure, but can take a look and let you know. We did modify the height of st.button to match the rest of the widgets, previously it was a tad smaller, so maybe that's the root cause of the issue.

[jrieke]

Noting that if this is related to the changes to st.button, we shouldn't revert those but make vertical alignment easier in the situation above.

[nidoro]

Hello,

I would like to suggest that the kind of alignment described by the OP become a feature, so we don't have to relly on hacks to achieve the desired behavior. This is the hack that I'm using:

import streamlit as st

cols = st.columns([2,1])

cols[0].selectbox("Selectbox", [])
cols[1].markdown("<div style='width: 1px; height: 28px'></div>", unsafe_allow_html=True)
cols[1].button("Button")

It would be nice to be able to do something like this: st.button("Button", margin_top=True)

[iuiu34]

@nidoro i would add better integration with css overall.

More than adding 10+ custom args to every widget.
A better suit would be, better css classes and then, be able to do css customization: martin, text-align, font.

There's a st_extra utils for this. But due bad integration with css from st, works kinda poorly (and requires a lot of effort, feels kinda a hack)

[nidoro]

@iuiu34 Agreed, more css control would be even better. But I think that for the situation discussed here in particular, users should not be required to mess with CSS and guess how much margin they should put on the top of a button in order to align it with elements on the sides, even if this kind of CSS customization becomes a streamlit feature in the future.

[jrieke]

Hey, we just started some work on vertical alignment, see update here. Please follow on that issue for more news! For CSS customization, you can follow #3888.

[jrieke]

Going to close this issue because we're pretty advanced on the vertical alignment solution and will ship that soon. Will update on the issue linked above, please comment there if you have more feedback!