Align columns with labels and multiple elements

[SERGIO_AYALA_MINANO]

I am trying to create a multicolumn line with several configs for my app, something like:

But the problem is that when mixing labeled and unlabeled components, they were designated. Does anyone know how to fix it correctly?

[ferdy]

Could you post a sample code?

[SERGIO_AYALA_MINANO]

Yes! Here the example code:

import streamlit as st 

def main():

    tabs = st.tabs(["example 1", "example 2"])

    with tabs[0]:
        online_mode = st.checkbox("Online Mode", value=False)
        function_editor.editor_is_online = online_mode

        col1, col2, col3, col4 = st.columns([1.5, 3, 3, 0.5])  # Adjust the width ratios as per your layout

        # Column 1: Radio Buttons for "What are you working on?"
        with col1:
            work_on = st.radio(
                "What are you working on?",
                ("New", "Existing")
            )

        # Check the value of work_on to decide which widget to display
        if work_on == "New function":
            # Column 2: Text input for Function Name
            with col2:
                function_name = st.text_input("", placeholder="Enter a name for your function", key="function_name")

            # Column 3: Save Button aligned with the text input
            with col3:
                st.write("")  # This ensures that the button is aligned with the text input
                save_button = st.button(
                    "Save new rule",
                    disabled=function_name == "",  # Disabled if function_name is empty
                    key="save_new_rule"
                )
        else:
            pass

    with tabs[1]:
        st.markdown("to be done in next versions")

if __name__ == "__main__":
    main()

[ferdy]

To align the text_input and button, add a spacer above the button. I can see that you already have st.write("") but its height is not enough.

We will revise your existing st.write such that we can control its height.

            # Column 3: Save Button aligned with the text input
            with col3:
                # This ensures that the button is aligned with the text input
                # st.write("")
                st.write('<div style="height: 30px;">Save it</div>', unsafe_allow_html=True)

                save_button = st.button(
                    "Save new rule",
                    disabled=function_name == "",  # Disabled if function_name is empty
                    key="save_new_rule"
                )

Output