_remove_extra_spacing() hides other components

[benlindsay]

First off thanks for maintaining this package! Very helpful stuff. Just noticed one thing in the latest release. The _remove_extra_spacing() method of CookieManager has too broad of reach. Other packages, like streamlit-oauth, have 0-height components, so that style definition hides that too. As an example, with streamlit==1.32.2, extra-streamlit-components==0.1.71, and streamlit-oauth==0.1.8 installed:

# visible_button.py
import streamlit as st
from streamlit_oauth import OAuth2Component

oauth2 = OAuth2Component("abc", "123", "https://example.com/auth", "https://example.com/token")
oauth2.authorize_button("Authorize", "https://example.com/redirect", "token")

shows the authorize button, but

# invisible_button.py

import streamlit as st
from streamlit_oauth import OAuth2Component
import extra_streamlit_components as stx

cookie_manager = stx.CookieManager()
cookies = cookie_manager.get_all()
oauth2 = OAuth2Component("abc", "123", "https://example.com/auth", "https://example.com/token")
oauth2.authorize_button("Authorize", "https://example.com/redirect", "token")

shows nothing.

What I've been using in my app is something like this:

import streamlit as st

st.markdown(
    """
    <style>
        .element-container:has(
            iframe[title="extra_streamlit_components.CookieManager.cookie_manager"]
        ) {
            display: none
        }
    </style>
    """,
    unsafe_allow_html=True,
)

I can't find where I originally saw that or something like it to attribute the idea to the right person, but could we switch to something narrower like this to avoid hiding other components?

[juancotrino]

Hi! This happens with the streamlit-option-menu package as well. @benlindsay where would you place that workaround piece of code? In the _remove_extra_spacing() method itself?

[benlindsay]

Yeah. Without replacing the CSS in _remove_extra_spacing(), I don't know of any way to add additional CSS to undo it. This makes the latest version unusable for me. I'm currently keeping it pinned at <0.1.71

[map0logo]

Hi, I have the same problem. When I use stx.CookieManager() in the same page as streamlit-agraph, the graph disappear, I've tried to patch the html, but the agraph canvas take initial height="0", so the patch didn't work.

My main question is, why is _remove_extra_spacing() needed? What is it supposed to achieve, is it safe to change it or remove it?

[benlindsay]

Without that function or something like it, every time the Cookie Manager widget is called, a blank element that's 10 or 15 pixels tall (can't remember which) shows up. This can lead to different amounts of extra spacing in your app depending on how many times the Cookie Manager gets called in a particular run, which can be an annoying user experience.