Form elements using CSS

🎈 Using Streamlit
1

I have a form elements like name, address , phone number , which is aligned vertically in a webpage using streamlit.

I wanted to align each elements in a horizontal way side by side using CSS.

1 Like
2

Hi, Streamlit inherently supports horizontal alignment that can be done using st.columns. Please see our Docs for more info.

3

Thank you, i will have a look and try.

4

Here after aligning the elements horizontally, i wanted to resize the text fields of inputs.

5

Hi @keshav_dk, you can certainly make columns have different sizes.

Consider the following example:

import streamlit as st
import numpy as np

col1, col2 = st.columns([3, 1])
data = np.random.randn(10, 1)

col1.subheader("A wide column with a chart")
col1.line_chart(data)

col2.subheader("A narrow column with the data")
col2.write(data)

Note: Code snippet from Streamlit Docs on st.columns

1 Like
6

Thank you @dataprofessor for the reply.