Wrong Dimensions of pages after switch_page button click

[CharleyDL]

Hi Everyone!
I seem to have a bug, but I’m not sure, maybe I’m missing something.

In my app, I have a main page that links either to the login page or to the register page. When you click on one of them, the page layout is wrong, so you have to reload the page to get the right dimensions (see the two screenshots below).

Is there a parameter or something to prevent this?

Thank you in advance!

After the click

After reload the page - good dimensions

[dataprofessor]

Hi @CharleyDL

Could you share the underlying code snippet to reproduce this or the app’s repo so the community can help provide feedback. Thanks!

[CharleyDL]

Hi @dataprofessor!

Sure, I can!

The Home.py

import streamlit as st


def login():
    log_button = st.button("Log In")

    if log_button:
        st.switch_page("pages/login.py")


def register():
    register_button = st.button("New User")

    if register_button:
        st.switch_page("pages/register.py")


## -- Page Config -- ##
st.set_page_config(page_title='AIS',
                   layout='wide')

## -- Header Logo -- ##
h_left, h_left_cent, h_center, h_right_cent, h_right = st.columns(5)

with h_center:
    st.markdown(
    """
    <style>
        [data-testid=stImage]{ margin-left: 48px; }
    </style>
    """, unsafe_allow_html=True
    )
    st.image('asset/logo_L.png')


## -- Connection Section -- ##
co_1, co_2, co_3, co_4 = st.columns((5,1,1,5))

with co_2:
    login()

with co_3:
    register()

st.markdown('----')

The pages/login.py

import streamlit as st

col1, col2, col3 = st.columns([1, 4, 1])
with col2:
    st.header("Sign In")
    st.page_link("pages/register.py", label="No account yet? Sign Up")

    with st.form("login"):
        colH1,colH2,colH3 = st.columns([1, 1, 1])
        with colH2:
            st.image('asset/logo_M.png')

        st.text_input(
        "email", placeholder="email",
        label_visibility='hidden', key="email",
        )

        st.text_input(
        "password", placeholder="password",
        label_visibility='hidden', type='password', key="password",
        )

        colF1,colF2,colF3 = st.columns([2, 1, 2])

        with colF2:
            if st.form_submit_button("Log In"):
                st.write("test!")

The pages/register.py

import streamlit as st

col1, col2, col3 = st.columns([1, 4, 1])
with col2:
    st.header("Create New Account")
    st.page_link('pages/login.py', label="Already have an account? Sign In")

    with st.form("register"):
        colH1,colH2,colH3 = st.columns([1, 1, 1])
        with colH2:
            st.image('asset/logo_M.png')

        colM1, colM2, colM3 = st.columns([1, 2, 2])
        with colM1:
            st.selectbox(
                "Title",
                ( "M", "Mme", "Mx", "Dr", "Dre", "Drx", "Pr", "Pre", "Prx"),
                label_visibility='hidden', index=None,
                placeholder='-', key='title'
            )

        with colM2:
            st.text_input(
                "First Name", placeholder=f"First Name",
                label_visibility='hidden', key='first_name'
            )

        with colM3:
            st.text_input(
                "Last Name", placeholder="Last Name",
                label_visibility='hidden', key='last_name'
            )

        st.text_input(
            "email", placeholder="email",
            label_visibility='hidden', key='email'
        )

        st.text_input(
            "password", placeholder="password",
            label_visibility='hidden', type='password', key='password'
        )


        colF1,colF2,colF3 = st.columns([1, 1, 1])

        with colF2:
            if st.form_submit_button("Create account"):
                st.write("TEST !")

Thank you for your help!

[dataprofessor]

Hi @CharleyDL

Looking through the code the register.py page is using all native Streamlit function and the page layout is not wide (while the Home page uses the wide setting). Looking from the screenshot the page width seems to be different. As the page elements are responsive to the browser’s width, what you’re seeing is normal, where the page elements expand to the width of the browser.

Not sure if it would help, but have you tried standardizing the page width to be the same for all pages. For example, all pages using layout=“centered” for st.set_page_config().

Hope this helps!

[CharleyDL]

@dataprofessor You were right!
Having the wide in layout applies to all pages. So I’ve added the set_page_config with layout=centered to the login and register pages, which corrects the problem.
Thank you so much for this tip!

[dataprofessor]

Glad to hear that it is working now!