Create nested columns

Using Streamlit
1

how to create columns inside columns ?

col1_repl, col2_repl = st.columns(2)
col1,col2 = col1_repl.columns(2)
with col1_repl:
        with st.form(key='my_form_non_empty'):
                        
            st_input = st.number_input if is_numeric_dtype(df[columns]) else st.text_input
                        
             with col1:
                  # do something
             with col2:

this display the below error :
StreamlitAPIException: Columns may not be nested inside other columns.

Traceback:
File “f:\AIenv\streamlit\app2.py”, line 1332, in
main()
File “f:\AIenv\streamlit\app2.py”, line 682, in main
col1,col2 = col1_repl.columns(2)

2 Likes
2

Hi @leb_dev,

Currently, you can’t create columns inside columns, that’s what the error message is saying.

If you want to create a big column next to 2 smaller columns then you can create unevenly sized columns from the first call like so:

col1,col2,col3 = st.columns([2,1,1])

This will make col1 twice the size of col2 and col3, effectively being the exact same visually as if you created 2 columns that you then split one in half.

Checkout the docs for more on columns.

Happy Streamlit-ing!
Marisa

2 Likes
3

No what i want is to create
col1 that handle a form where inside the form i have subcol1 subcol2
Col2 have a form with 1 text input and button.

All of this because i want to create a form that allow user to change the values of a field in dataframe
But i had the problem when the user need to replace the NAN values.
Because of that i tried to create this layout nested layout.

So is there another way to being able to replace the selected values and NAN values in the same form this will be very good for me.

Thank you for your reply and help.

2 Likes
4

Hey

So you want people to be able to edit from your app the data in the dataframe you have changing NAN values to different ones?

You can do this with @ash2shukla component: streamlit-brokeh-events

This post might help: Editable data tables for float values - #3 by blob123

Happy Streamlit-ing!
Marisa

1 Like
5

So leb_dev did you solve the problem? I also have the same probleam. If you have solved then please let me know how you did it… Thank you

2 Likes
6

I also want the nested columns to design a monitor with multiple panes which contains columns of sub-elements. The solution here did not really solve the issue of nested column layout. Appreciated if anyone knows how to achieve that. Thanks.

2 Likes
7

I’ve not found a real workaround but you can kind of solve it by using custom HTML elements and st.markdown() to replicate columns for simple elements.

html3 = f"""
        <div class="total-dc"">
            <p>Total DC: ÂŁ{account_sum_dc}<p>
            <p>TEST<p>
        </div>

        """

    st.markdown(html3, unsafe_allow_html=True)

Here is an example. I then use CSS via st.markdown() to make the html element into a grid with columns.

1 Like
8

If this could be sorted we will really appreciate, we need nested columns

1 Like
9

There is an ongoing discussion about nested columns and expanders over here: Allow columns inside columns · Issue #5284 · streamlit/streamlit · GitHub. Nested columns are remaining officially disabled, but you could test the package mentioned in the github issue:

For those who want it anyway despite being intentionally disabled by design:

GitHub - joy13975/streamlit-nested-layout: Allows columns and expanders to be nested

If you encounter issues there, please don’t bring item over to the official community.

1 Like
10

Here is another hack: Nested Columns work fine in most cases. Just uncomment the error in the streamlit code (file PYTHON_PATH\lib\site-packages\streamlit\delta_generator.py line 557ff)

Link to original issue

1 Like
11

If someone stumbles upon this thread, from version 1.18.0, you can have one level of nested columns in the main area of the app! Check the changelog and the st.columns documentation for details.

6 Likes
12

I want to create a layout this way
image
I tried tabs inside columns that also not working.

1 Like
13

You could fix the height of each st.container and organize them using st.columns.

image
image747Ă—469 33.8 KB

Code 
import streamlit as st

## Define layout and containers
HEIGHT = 400

cols = st.columns(2)

with cols[0]:
    left_panel = st.container(height=HEIGHT + 15, border=True)

with cols[1]:
    upper_right_panel = st.container(height=HEIGHT//2, border=True)
    lower_right_panel = st.container(height=HEIGHT//2, border=True)


## Add contents
with left_panel:
    "## Left panel"
    "A bunch of text " * 100

with upper_right_panel:
    "## Upper right panel"
    "A bunch of text " * 100

with lower_right_panel:
    "## Lower panel"
    "A bunch of text " * 100
2 Likes
14

Thankyou .It worked …!

1 Like