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

Using Streamlit
1

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.

2 Likes
2

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

3

Hello @jmdoucette,

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

image
image759×105 1.12 KB

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("")

image
image757×105 788 Bytes

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

image
image800×227 1.97 KB

4 Likes
4

Thank you for the response

Screen Shot 2021-01-11 at 11.41.19 PM
Screen Shot 2021-01-11 at 11.41.19 PM1430×768 16.2 KB

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

Screen Shot 2021-01-11 at 11.47.26 PM
Screen Shot 2021-01-11 at 11.47.26 PM1046×370 62.3 KB

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.

5

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

6 
def text_field(label, columns=None, **input_params):
    c1, c2 = st.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("Questions:-",)
    # Notice that you can forward text_input parameters naturally
    answer= text_field(("Answer:-"))

I have this code and I want to increase the answer field area like text_area.
I tried it to write answer= st.text_area(text_field(("Answer:-"))) but does not work.

What shall I do for it?
I want to create this front end in my streamlit project. And I am a beginner in streamlit framwork.
It would be good someone help me to reach this mockup in streamlit.

srreamlit