10+ items in popover showing above button on laptop but not monitor

🎈 Using Streamlit
1

Hello all -

I’ve been using streamlit to build an internal company dashboard for about 6 months now and it has been great. I just ran into my first potential bug:

I have multipage app for which I made a custom menu using a combination of st.popover and page_link. I have found that if I have more than 9 items in my popover, it displays above the button on a laptop or tablet, but not when the same computer is plugged into an external monitor.

I’ve done some testing and created a simple reproduceable example below: In my reprex, I found that I can have many items in my popover without trouble. But adding in a logo creates the problem on my laptop (but not on my monitor) when I get to 11 items.

Screenshot 2024-06-18 at 12.53.35 PM
Screenshot 2024-06-18 at 12.53.35 PM778×1110 44.3 KB

Screenshot 2024-06-18 at 12.53.28 PM
Screenshot 2024-06-18 at 12.53.28 PM756×940 32.3 KB

The expected behavior is that the container stays below the button, but has a scrollbar like on my monitor. See image of the same popover working fine on my external monitor:

Screenshot 2024-06-18 at 12.53.11 PM
Screenshot 2024-06-18 at 12.53.11 PM427×661 20 KB

The positioning of the container (above the button) makes it impossible to use.
Does anyone know why this happens and how to prevent it from happening? I definitely want to have more than 9 items in my menu!

Below is a reprex.

Thank you for your help!
Mike

import streamlit as st

with st.sidebar:
    st.image("assets/heights-logo-tiny.png")
    menu = st.popover("Menu")
    menu.markdown("###### Line1")
    menu.markdown("###### Line2")
    menu.markdown("###### Line3")
    menu.markdown("###### Line4")
    menu.markdown("###### Line5")
    menu.markdown("###### Line6")
    menu.markdown("###### Line7")
    menu.markdown("###### Line8")
    menu.markdown("###### Line9")
    menu.markdown("###### Line10")
    menu.markdown("###### Line11")
    menu.markdown("###### Line12")
    
    menu2 = st.popover("Menu")
    menu2.markdown("###### Line1")
    menu2.markdown("###### Line2")
    menu2.markdown("###### Line3")
    menu2.markdown("###### Line4")
    menu2.markdown("###### Line5")
    menu2.markdown("###### Line6")
    menu2.markdown("###### Line7")
    menu2.markdown("###### Line8")
    menu2.markdown("###### Line9")

Version info: streamlit 1.35, python 3.11

2

Hi @Michael_Hollander,

Thanks for sharing your findings. Can you please create an issue in our GitHub repo with all the details you provided?

3

Hi @Michael_Hollander

Could you share the link to your app so that others in the community could test this. Also, it may be the height difference of the browser in the laptop vs external monitor (may have more height estate).

Could you try zooming out so that it may be 70% and see if that solves the issue?

4

Thank you! Great suggestion. I actually did the opposite and can recreate the problem by zooming in on my external monitor. I can solve the problem on my laptop by zooming out. So this pinpoints the problem, but it is still a bug, methinks. And it turns out the logo isn’t important. I can just add lots of links in and recreate the problem.

At your suggestion, I deployed my test to community cloud:

5

Done!

6

Awesome!