Change in Spacing Between Graphic Elements: Intentional Update or Unintended Effect?

Using Streamlit
1

Hi,

It seems like the spacing between graphic elements has changed between versions 1.3.7 and 1.3.8 and above.

Was this change intentional? Personally, I find the new rendering a bit unappealing; I’m curious to know your thoughts.

Example that I tested in both versions, and the result is not the same :frowning: :

import streamlit as st

with st.sidebar:
st.subheader(“Menu1”)
st.sidebar.page_link(“pages/page1_menu1.py”, label=“page1_menu1”)
st.sidebar.page_link(“pages/page2_menu1.py”, label=“page2_menu1”)
st.sidebar.page_link(“pages/page3_menu1.py”, label=“page3_menu1”)

st.subheader("Menu2")
st.sidebar.page_link("pages/page1_menu2.py", label="page1_menu2")
st.sidebar.page_link("pages/page2_menu2.py", label="page1_menu2")
2

I tried to find the PR for it, but couldn’t. I recall there were a couple PRs recently that adjusted spacing of elements. Specifically, IIRC, the minimum height of elements was standardized so buttons and selectboxes with labels, for example, line up correctly if displayed side-by-side using columns. Can you share screenshots of the difference you are seeing?

3

Of course, below is the screenshot of my example under the different versions :

Capture
Capture764×514 19 KB

4

Thanks. I’ll share this internally.

By the way, is there a reason you can’t use st.navigation?

5

I used Streamlit to create the front end of an operational application that utilizes our datalake.

I did not use st.navigation for several reasons:

  • I have a menu composed of multiple pages organized into several sections:

    • Section 1: [page add, page update, page_list, page analysis]
    • Section 2: [page publish, page publication analysis]
      When selecting pages in Section 2, data inputs are added, and I want them to be visible without the need to scroll down.
    • Admin Section: [page config1, page config2, page config3, page config4, page config5, page config6, page config7, data quality, monitoring]
      I placed the administration pages of the application within a st.popover.

    As a result, I have multiple pages in total, and accessing certain pages requires scrolling. Additionally, the sections cannot be collapsed.

  • Debugging a page outside of st.navigation is simple. Each page is essentially its own Streamlit application, as Streamlit is re-instantiated (a page can call st.set_page_config again, session variable management is straightforward, etc.).

Capture3
Capture3719×661 71.1 KB

6

A dev replied that this was a regression and they’ve created a PR to fix it: Fix page link margin regression by lukasmasuch · Pull Request #9625 · streamlit/streamlit · GitHub

:slight_smile:

7

Thank you, and have a great day :pray: