How to Distribute Columns Across the Entire Screen?

[rsirin]

Hi there,

I am a newbie for Streamlit. Therefore, I’m sorry if the question is dumb.

However, I’m trying to build an app (called Landed Cost) that is going to calculate Export Costs from the Exporter Country to the Importer Country. To do that, I need to get the product & address information from the user. I’ve divided the inputs as below:

The code is simple as below.

    col1, col2 = st.columns(2)

    with col1:
        length = st.number_input("Product Length (cm)",value=0)
        width = st.number_input("Product Width (cm)",value=0)   
        height = st.number_input("Product Height (cm)",value=0)
        weight = st.number_input("Weight (Piece)",value=0)
    with col2:
        item_quantity = st.number_input("Item Quantity (pieces)",value=0)
        box_quantity = st.number_input("Box Quantity (pieces)",value=0)
        total_weight = st.number_input("Total Weight (kgs)",value=weight*box_quantity)
        cbm = st.number_input("CBM (m3)",value=(((length*width*height)/1000000)*box_quantity))

Even if I have distributed product information to the 2 columns, the columns have not been distributed to the entire screen. Also, I want to use the remaining part of the screen by getting address information from the user.

How can I solve it? I tried adding new and will-not-be-used columns and decreased their relative width. However, when I do that the product information (left) side gets narrowed and I do not want to see them as narrowed. I also tried to use nested columns in my system but the system threw the error.

The area that I want to use (without narrowing the left side) is as below:

[BeyondMyself]

you can do like this:

import streamlit as st
st.set_page_config(layout=“wide”)
#your previous code put here after this line

[rsirin]

I’ve added it already. That did not help. There is also the upper side of my Streamlit page, which is below, and that suits my requirements. But, I can’t do it for the Productt & Adress Information side.

[Shawn_Pereira]

Hi @rsirin, are you looking for something like this?

import streamlit as st

st.set_page_config(layout="wide")

col1, col2 = st.columns(2)
with col1:
    st.subheader("Product & Address Info...")
    col21, col22 = st.columns(2)
    with col21:
        length = st.number_input("Product Length (cm)",value=0)
        width = st.number_input("Product Width (cm)",value=0)   
        height = st.number_input("Product Height (cm)",value=0)
        weight = st.number_input("Weight (Piece)",value=0)
    with col22:
        item_quantity = st.number_input("Item Quantity (pieces)",value=0)
        box_quantity = st.number_input("Box Quantity (pieces)",value=0)
        total_weight = st.number_input("Total Weight (kgs)",value=weight*box_quantity)
        cbm = st.number_input("CBM (m3)",value=(((length*width*height)/1000000)*box_quantity))

with col2.container():
    st.write("You can use this column space for anything else...")

Cheers

[dataprofessor]

Hi @rsirin

In addition to the amazing code snippet provided by @Shawn_Pereira, if you’d like to add some white space, you can add additional columns to serve as white space. Afterwards, you can adjust the width of each columns (as they don’t need to have the same width, but at default the width of all columns are of the same width).

col = st.columns((3, 1, 3))

with col[0]:
   ...statements goes here...
with col[1]:
   ...this is the white space...
with col[2]:
   ...statements goes here...

[rsirin]

Hi @Shawn_Pereira @dataprofessor

Thank you for your help! That solved my issue.

Cheers!