Adjusting height between columns

Using Streamlit
1

Hi Streamlit team,

I’m working in python, I’m using text input and save button to save what ever entered in text box. But the alignment between text bar and save button is not matching. i used st.column() to make them side by side. can you please help in adjusting save button to text input bar.

Also can you please help in how to implement a searchbar which shows suggestions loaded from a text file.

image
image1095×164 2.43 KB

2

Hi @Nanditha_Swamy,

Thanks for posting and welcome to the Streamlit Community Forum! :raised_hands:t5:

Here’s some CSS code that might help with aligning the button and text box on the columns:

import streamlit as st

col1, col2 = st.columns([5,1])

text_input = col1.text_input('Enter text here')
if col2.button('Save'):
    st.write(f'You entered: {text_input}')

st.write(
    """<style>
    [data-testid="stHorizontalBlock"] {
        align-items: flex-end;
    }
    </style>
    """,
    unsafe_allow_html=True
)

Can you provide more explanation for your second question about the search bar? Maybe an example would help. Be as detailed as possible.

3

Hi @tonykip ,

Thank you for the solution.

Second one i have made an alternative using st.selectbox() for now. if in future required, will let you know.

Thanks,
Nanditha

5

Awesome! Glad it works.