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

[Suthan17]

Summary

I want to create a paragraph style sentence with user inputs in between them as in the picture. However, the input widget and text are misaligned. How to fix it?

Steps to reproduce

Code snippet:

# Define a style for no wrapping
style = "display: inline-block; vertical-align: middle; white-space: nowrap; font-family: 'Inter'; font-size: 40px; font-weight: medium;"

# Add some blank space at the top
# Add custom CSS for vertical alignment and font styling
st.markdown("""
    <style>
        .st-dd, .stTextInput > div > div > input, .stButton > button, .stSlider > div {
            vertical-align: middle !important;
            font-family: 'Inter';
            font-size: 40px;
            font-weight: 500;
        }
        .stTextInput > div > div > input {
            margin-top: 5px !important;
        }
    </style>
    """, unsafe_allow_html=True)

st.write("##")

cols1 = st.columns([1, 3, 1, 2, 1])
cols1[0].markdown(f"<div style='{style}'>I am a</div>", unsafe_allow_html=True)
job_title = cols1[1].selectbox("", job_titles, format_func=lambda x: "", key='job_title')
cols1[2].markdown(f"<div style='{style}'>with</div>", unsafe_allow_html=True)
experience = cols1[3].selectbox("", years_of_experience, format_func=lambda x: "", key='experience')
cols1[4].markdown(f"<div style='{style}'>years of experience</div>", unsafe_allow_html=True)

cols2 = st.columns([2, 1, 1, 1, 2])
cols2[0].markdown(f"<div style='{style}'>who currently earns RM</div>", unsafe_allow_html=True)
current_salary = cols2[1].number_input("", value=0, format="%d", key='current_salary')
cols2[2].markdown(f"<div style='{style}'>per month with</div>", unsafe_allow_html=True)
num_past_employments = cols2[3].selectbox("", past_employments, format_func=lambda x: "", key='num_past_employments')
cols2[4].markdown(f"<div style='{style}'>past employments</div>", unsafe_allow_html=True)

cols3 = st.columns([2, 1, 2])
cols3[0].markdown(f"<div style='{style}'>that aims to earn RM</div>", unsafe_allow_html=True)
expected_salary = cols3[1].number_input("", value=0, format="%d", key='expected_salary2')
cols3[2].markdown(f"<div style='{style}'>per month.</div>", unsafe_allow_html=True)

[BALAVIGNESH]

Hey @Suthan17,
I think you are facing this problem because you have given input the two css differntly, try changing the css code for the .stTextInput > div > div > input

.stTextInput > div > div > input {
            font-family: 'Inter';
            font-size: 40px;
            font-weight: 500;
            width: auto;
            max-width: 100%;
            margin-right: 10px;
        }

This May help You. Try this once If you face similar problem again then please provide with whole code snippet so that it is easier to troubleshoot the problem!

[Goyo]

See the label_visibility argument to selectbox() and other widgets. Note that using empty labels is not recommended and it might raise an errr in a future version.

[Suthan17]

My entire code and now I have aligned the text to be inline with widget however, there are new issues such as the space between text and widget are huge and space between rows are huge. I attached two pictures one is the current output and second is the desired output. Is it possible to make the current output as desired output?

import streamlit as st
import pandas as pd

Load the dataset

data_path = ‘C:/Users/Suthan/Desktop/Internship/streamlit/salary_data(streamlit).csv’ # Replace this with your actual path
data = pd.read_csv(data_path)

Create a list of unique job titles from the data

job_titles = sorted(data[‘Job Title’].unique().tolist())
years_of_experience = [str(i) for i in range(31)]
past_employments = [str(i) for i in range(11)]

Add custom CSS for vertical alignment and font styling

st.markdown(“”"

.st-dd, .stTextInput > div > div > input, .stButton > button, .stSlider > div {
vertical-align: middle !important;
font-family: ‘Inter’;
font-size: 40px;
font-weight: 500;
margin-left: -20px !important;
padding-left: 0px !important;
background-color: white !important;
}

“”", unsafe_allow_html=True)

Define a style for no wrapping

style = “display: inline-block; vertical-align: middle; white-space: nowrap; font-family: ‘Inter’; font-size: 40px; font-weight: medium;”

Add some blank space at the top of each text element

cols1 = st.columns([1, 3, 1, 2, 1])
cols1[0].write(“##”)
cols1[0].markdown(f"

I am a

“, unsafe_allow_html=True)
job_title = cols1[1].selectbox(”“, job_titles, format_func=lambda x: “”, key=‘job_title’)
cols1[2].write(”##“)
cols1[2].markdown(f”

with

“, unsafe_allow_html=True)
experience = cols1[3].selectbox(”“, years_of_experience, format_func=lambda x: “”, key=‘experience’)
cols1[4].write(”##“)
cols1[4].markdown(f”

years of experience

", unsafe_allow_html=True)

Add some blank space at the top of each text element in cols2

cols2 = st.columns([1, 0.8, 1, 0.8, 1])
cols2[0].write(“##”)
cols2[0].markdown(f"

who currently earns RM

“, unsafe_allow_html=True)
current_salary = cols2[1].number_input(”“, value=0, format=”%d", key=‘current_salary’)
cols2[2].write(“##”)
cols2[2].markdown(f"

per month with

“, unsafe_allow_html=True)
num_past_employments = cols2[3].selectbox(”“, past_employments, format_func=lambda x: “”, key=‘num_past_employments’)
cols2[4].write(”##“)
cols2[4].markdown(f”

past employments

", unsafe_allow_html=True)

Add some blank space at the top of each text element in cols3

cols3 = st.columns([1, 1, 2])
cols3[0].write(“##”)
cols3[0].markdown(f"

that aims to earn RM

“, unsafe_allow_html=True)
expected_salary = cols3[1].number_input(”“, value=0, format=”%d", key=‘expected_salary2’)
cols3[2].write(“##”)
cols3[2].markdown(f"

per month.

“, unsafe_allow_html=True)
cols3[1].write(”##")

Your existing logic for salary comparison

if st.button(“Compare Salary”):
# Your code for salary comparison here
st.write(“Salary comparison logic here.”)

[BALAVIGNESH]

For achieving the desired you need to make changes in the css only. I think their is no problem on streamlit code rather you should make changes in the css code and try different style, and don’t give padding to any tag and for line height you can use line-height property.
Hope this might help you!