New layout columns

Thiemo_Seys · October 15, 2020, 9:56am

Hello guy!

First of all a big thank you for the layout update, it will be a very useful feature. Now that I was playing around with the columns I wondered if it possible to have columns in columns?

I tried the following but that did not work:
import streamlit as st

col1, col2 = st.beta_columns(2)
col1.write('I am base col1!')
col2.write('I am base col2!')

col_in_col1, col_in_col2 = st.beta_columns(2)
col1.col_in_col1.button('button1')
col1.col_in_col2.button('button2')

col2.col_in_col1.button('button3')
col2.col_in_col2.button('button4')

ash2shukla · October 15, 2020, 10:15am

Hi @Thiemo_Seys, Welcome to the community !

I don’t think you can have nested columns or even expanders. Check this bit of code.

github.com

streamlit/streamlit/blob/e67525b91f42f64fdc69c9e00c474c80cf5c7cd7/lib/streamlit/delta_generator.py#L525


# Internal block element, to hide the 'layout' param from our users.
def _block(self, block_proto=Block_pb2.Block()):
    # Switch to the active DeltaGenerator, in case we're in a `with` block.
    self = self._active_dg

    # Prevent nested columns & expanders by checking all parents.
    block_type = block_proto.WhichOneof("type")
    # Convert the generator to a list, so we can use it multiple times.
    parent_block_types = [t for t in self._parent_block_types]
    if block_type == "column" and block_type in parent_block_types:
        raise StreamlitAPIException(
            "Columns may not be nested inside other columns."
        )
    if block_type == "expandable" and block_type in parent_block_types:
        raise StreamlitAPIException(
            "Expanders may not be nested inside other expanders."
        )

    if self._container is None or self._cursor is None:
        return self

Can you describe your use case? Maybe we can explore an alternative way to achieve it?

I think we will have this functionality of nesting columns/expanders in future releases? @randyzwitch can you please comment on it?

Hope it helps!

Thiemo_Seys · October 15, 2020, 10:24am

Allright thanks for the help, I just noticed there is the following warning in the API reference:
Currently, you may not put columns inside another column.

I was planning to use it to stack buttons horizontally instead of vertically. The project is to display images in two columns, and then above the image display 3 buttons that change the color of the ‘attached’ image

ash2shukla · October 15, 2020, 11:11am

Hey @Thiemo_Seys,
Sounds interesting, I just implemented this bit, I think you can easily substitute the working of 3 buttons with a selectbox. And it makes more sense to have a select box for filters I think as currently you have 3 colors in future you might have 100s. But its just my opinion i think,

It would look something like this if you choose to implement it this way,

Check this gist for code, https://gist.github.com/ash2shukla/f763d205a8e82a4fdd0d6534f3dae048

Thiemo_Seys · October 15, 2020, 1:31pm

Thanks for the code example, using the selectbox for now and maybe changing it later to buttons when a new update releases is a decent fix for the moment.

One other question, if this needs to be posted in an other thread be sure to let me know.
Is it possible to use concurrent.futures.ThreadPoolExecutor in streamlit code to speed up the generating/rendering of images?

When I try to use it, i get the following error with the simple piece of code below:
error:

 2020-10-15 15:24:33.471 Thread 'ThreadPoolExecutor-1_0': missing ReportContext

code:

model_col1, model_col2 = st.beta_columns(2)
ids = [str(i) for i in dat_filtered[‘id’].tolist()]
row_indexes = [i for i in range(0,len(ids))]
from itertools import repeat

def test_threadpool(id, img_combiner, model_col, model_index, row_index):
    with model_col:
    st.write(id)

with ThreadPoolExecutor(max_workers=12) as exec:
    print('started loading images with threadpoolExe')
    exec.map(test_threadpool, iter(ids),repeat(img_combiner), repeat(model_col1), repeat(0), 
iter(row_indexes))
#    print(f'using ids({len(ids)}): {ids} and row indexes({len(row_indexes)}: {row_indexes})')
#    exec.map(show_image, iter(ids),repeat(img_combiner), repeat(model_col1), repeat(0), 
iter(row_indexes))
#    exec.map(show_image, iter(ids),repeat(img_combiner2), repeat(model_col2), repeat(1), 
iter(row_indexes))

print('done running threadpool')

With my full code that generates the images I get no error or any output at all, nothings gets displayed either.

Casyfill · May 6, 2021, 9:41pm

Hey everyone!
Indeed that would be great to be able to nest one component under another (I realize this is a pretty hard task technically). For example, having multiple columns under the expander…

In my case, I want to have 2 columns after a shared “header”, but that is already within a column (or, alternatively, would be nice to be able to have a component populating 2 columns somehow.

I would also love to take a look at your example layout - it also seems to have a “shared” description over 3 “nested” maps on the right…

frkl · August 7, 2021, 8:14pm

I also just came across this, and it would be brilliant to be able put columns into other columns. I’m organizing my code into functions that take a parent component/DeltaGenerator as input, and not being able to put some types of widgets into some containers breaks this in some cases.
That being said, I appreciate that this is probably another level of complexity, and in a lot of cases there are workarounds that may not be 100% perfect in terms of desired layout, but often good enough…

Topic		Replies	Views
New layout options for Streamlit 💬 Show the Community!	26	32960	February 7, 2022
Support for nested columns 🎈 Using Streamlit	5	2101	December 30, 2023
Column Layout 🎈 Using Streamlit	3	607	August 9, 2023
Please add nested columns 🎈 Using Streamlit layout	3	637	October 14, 2023
Nested Containers 🎈 Using Streamlit	1	2211	May 13, 2022

New layout columns

Related Topics

Hello there 👋🏻

Cookie settings

Strictly necessary cookies

Performance cookies

Functional cookies

Targeting cookies