Is there any way to have user inputs be in-line with text?

It seems like a workaround could be putting the inputs and text in separate columns. The problem is that I’m having some trouble getting them to line up vertically, so any tips with fixing that would also be appreciated.

1 Like

Hey @jmdoucette,

Welcome to the Streamlit community! :partying_face: :partying_face: :partying_face: :tada:

Can you send a picture of what your trying to achieve (and what your app currently looks like)? You want a user input to appear as if it is on the same line as some text?

Cheers,
Marisa

Hello @jmdoucette,

Do you refer to this kind of mis-aligned layout?

What you could do is add some blank space in the first column at the top, like so:

c1, c2 = st.beta_columns([1, 4])

with c1:
    st.write("##")
    st.write("Some field")

with c2:
    st.text_input("")

However if you have more than one field, to keep things aligned, you’ll have to create a pair of columns everytime. Here’s a function that does this:

import streamlit as st

def text_field(label, columns=None, **input_params):
    c1, c2 = st.beta_columns(columns or [1, 4])

    # Display field name with some alignment
    c1.markdown("##")
    c1.markdown(label)

    # Sets a default key parameter to avoid duplicate key errors
    input_params.setdefault("key", label)

    # Forward text input parameters
    return c2.text_input("", **input_params)


username = text_field("Username")
password = text_field("Password", type="password")  # Notice that you can forward text_input parameters naturally

3 Likes

Thank you for the response

This is how it looks now. Thanks to synode, the columns are now lined up

This is how I would like it to look ideally, with the number inputs inside the line of text. It seems like this may not be possible in streamlit, but I figured I’d ask just in case it was.

Yes that is the kind of misalignment I was referring to, thank you for your help.