Plots rendering in unexpected order? (with columns / expanders)

Using Streamlit
1

If I have an expander and columns, plots are rendered in unexpected orders.

For example this plots as expected, with the expander first, then two plots

    with st.expander(
        f"Peak fitting: {ss.user_data.name}",
        expanded=False):
        #~ Plot findpeaks stuff, using their baked-in matplotlib
        fig = peak_find.plot_mpl(fp)
        st.pyplot(fig, use_container_width=True)

    #~ Plot with altair
    plot = peak_find.plot_altair(user_data_df)
    st.altair_chart(plot, use_container_width=True)

    plot_refined = peak_find.plot_altair(peak_rank_df)
    st.altair_chart(plot_refined, use_container_width=True)

but if we put the lower plots into columns, they get rendered above the expander, unexpectedly:

    with st.expander(
        f"Peak fitting: {ss.user_data.name}",
        expanded=False):
        #~ Plot findpeaks stuff, using their baked-in matplotlib
        fig = peak_find.plot_mpl(fp)
        st.pyplot(fig, use_container_width=True)

    #~ Plot with altair
    with column1:
        plot = peak_find.plot_altair(user_data_df)
        st.altair_chart(plot, use_container_width=True)
    with column2:
        plot_refined = peak_find.plot_altair(peak_rank_df)
        st.altair_chart(plot_refined, use_container_width=True)

any help on this? I couldn’t find a github issue raised but let me know if there is one :slight_smile: thanks

2

Are the columns above or below the expander?

3

Hi @altanner,

The vertical position of the columns is set whenever you first create them. So, if you create the columns before the expander, the content will go above.

See this example:


st.write("# Declaring columns BEFORE the expander")

col1, col2 = st.columns(2)

with st.expander("Expand me!"):
    st.write("This is inside the expander")

with col1:
    st.write("This is inside the col1")

with col2:
    st.write("This is inside the col2")


st.write("# Declaring columns AFTER the expander")

with st.expander("Expand me!"):
    st.write("This is inside the expander")

col1, col2 = st.columns(2)

with col1:
    st.write("This is inside the col1")

with col2:
    st.write("This is inside the col2")
he expander")

col1, col2 = st.columns(2)

with st.expander("Expand me!"):
    st.write("This is inside the expander")

with col1:
    st.write("This is inside the col1")

with col2:
    st.write("This is inside the col2")


st.write("# Declaring columns AFTER the expander")

with st.expander("Expand me!"):
    st.write("This is inside the expander")

col1, col2 = st.columns(2)

with col1:
    st.write("This is inside the col1")

with col2:
    st.write("This is inside the col2")

image
image1586Ă—1298 146 KB

1 Like
4

Thanks!

Further to that, how does ordering work with callbacks? Say,

        if ss.db_loaded:
            st.button(
                "Search reference database",
                key="db_search",
                on_click=db_search)

then renders the output of db_search above everything else on the page, when this button is clicked. Are there some docs I am missing on this?

5

I have the same issue. @altanner did you manage to resolve it?

6

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.