Questions on building layouts with beta_components

🎈 Using Streamlit
1

All,
I am trying to build custom layouts using the beta components that have been released and I have several questions that relate to these.

  1. When I try to use beta_expander, why does the layout begin at the middle of the page, rather than towards the left ?

image
image1719×989 21 KB

# Reproducible Example 
import streamlit as st

# Attempt a layout with beta_expander
layout = st.beta_expander('Toolbox Layout', expanded=True)

# Add a header
with layout:

    # Add a sidebar
    rand_1 = st.number_input('Random Value - 1')
    rand_2 = st.number_input('Random Value - 2')
    rand_3 = st.number_input('Random Value - 3')
    rand_4 = st.number_input('Random Value - 4')
    rand_5 = st.number_input('Random Value - 5')
    rand_6 = st.number_input('Random Value - 6')
    rand_7 = st.number_input('Random Value - 7')
    rand_8 = st.number_input('Random Value - 8')

    # Add some operation widgets
    selection_box = st.selectbox(
        "Select a mathematical operation:",
        ('Addition', 'Subtract', 'Division', 'Exponent')
    )

    # Provide a run button
    run = st.button(label='Calculate')

I also tried to add a beta_container, hoping that it might help fix the spacing. However, that is not the case.

  1. Why does beta_columns not align the tops as shown in the examples? I have raised this issue in a separate [discussion] as well, but all the suggested solutions don’t work especially when using plotly, even though I didn’t use plotly in this example.

image
image1006×764 33 KB

# Reproducible Example 
import streamlit as st
import pandas as pd
import numpy as np

# Attempt a layout with beta_expander
layout = st.beta_expander('Toolbox Layout', expanded=True)

# Add a header
with layout:
    # Add another container
    ui, result = st.beta_columns((1, 3))

    with ui:
        # Add a sidebar
        rand_1 = st.number_input('Random Value - 1')
        rand_2 = st.number_input('Random Value - 2')
        rand_3 = st.number_input('Random Value - 3')
        rand_4 = st.number_input('Random Value - 4')


        # Add some operation widgets
        selection_box = st.selectbox(
            "Select a mathematical operation:",
            ('Addition', 'Subtract', 'Division', 'Exponent')
        )

        # Provide a run button
        run = st.button(label='Calculate')

    with result:
        if run:
            chart_data = pd.DataFrame(
                np.random.randn(50, 3),
                columns = ["a", "b", "c"]
            )
            st.bar_chart(chart_data)

Appreciate any help in advance.

Thanks

2

For the first question, add this to after streamlit import. If you want at the all the way left, you have to make your configs for wide.
cols = st.beta_columns(3)
with cols[0]:`
For the second question, you do not have too many options except adding a markdown text to top of the plot with HTML turned on and determining the exact height.

3

@Berk_Demir,
Thank you for your response. I tried the following based on your advice, please let me know if I interpreted your suggestion correctly. However, I don’t see any change in the layout even after this implementation:

# Reproducible Example
import streamlit as st

# Attempt a layout with beta_expander
layout = st.beta_columns(3)

# Add a header
with layout[0]:

    # Add a sidebar
    rand_1 = st.number_input('Random Value - 1')
    rand_2 = st.number_input('Random Value - 2')
    rand_3 = st.number_input('Random Value - 3')
    rand_4 = st.number_input('Random Value - 4')
    rand_5 = st.number_input('Random Value - 5')
    rand_6 = st.number_input('Random Value - 6')

    # Add some operation widgets
    selection_box = st.selectbox(
        "Select a mathematical operation:",
        ('Addition', 'Subtract', 'Division', 'Exponent')
    )

    # Provide a run button
    run = st.button(label='Calculate')

image
image1886×888 10.1 KB