Form elements using CSS

[keshav_dk]

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.

[dataprofessor]

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

[keshav_dk]

Thank you, i will have a look and try.

[keshav_dk]

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

[dataprofessor]

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

[keshav_dk]

Thank you @dataprofessor for the reply.