Containers don't hold the expected values, st.number_input disappearing sometimes

Using Streamlit
1

I am running code locally. The code is here:

I’m using python 3.10

What I expect:
I upload a pdf document, could be one page, could be multipage, although the problem exists for multipage.
I have two columns. In col1 I want to have one image. At first it would be the first page of the document and I want to be able to use st.number_input to navigate to particular page of that document and I want the chosen page to REPLACE the first one.
In col2 I have three tabs and in the 2nd and 3rd one I want to show images exactly the same way as in column 1, but after clicking a button “visualize”

What is happening instead:
after uploading pdf and choosing multipage option, the first page shows up in col1 - that’s fine. But when I click “+” in number_input widget, the second page replaces the first page for about a millisecond, to then later show up under both columns, and the first page shows up again in col1. When I click “-” the second page disappears and only the first page is showing, so technically it’s ok.
In col2 in tab2, after clicking “visualize” the first page shows up, I click “+”, the second page replaces the first one, and that would be perfect BUT the widget disappears.
I will be grateful for suggestions what I am doing wrong.

2

Hi @domciak

To implement this

you can use st.empty() as a placeholder to hold content for the selected page and later assign content for a different selected page in order to replace the content entirely.

More info in the Docs:

Hope this helps!

3

Hi, thanks for the answer. I’m not sure if you checked out the repository I linked? Because st.empty() is what I tried to use, but maybe there’s something else that you meant. Please see below.

def show_original(placeholder):
    placeholder.image(st.session_state.images[st.session_state.current_page - 1])

        col1, col2 = st.columns([0.5, 0.5])
        with col1:
            placeholder1 = st.empty()
            with placeholder1.container():
                bottom_menu1 = st.columns((4, 1))
                placeholder_image1 = st.empty()
                with placeholder_image1:
                    st.image(images[0])
                with bottom_menu1[1]:
                    total_pages1 = len(images) if isinstance(images, list) else 1
                    current_page1 = st.number_input(label = "Page", 
                                                    min_value = 1, 
                                                    max_value = total_pages1, 
                                                    step = 1, 
                                                    key = 'current_page',
                                                    on_change=show_original,
                                                    args = (placeholder_image1, ))
                with bottom_menu1[0]:
                    st.markdown(f"Page **{current_page1}** of **{total_pages1}** ")