import streamlit as st # code for fixing the issue with streamlit tabs rendering height 0 when not active # https://github.com/streamlit/streamlit/issues/7376 # # see also https://github.com/randyzwitch/streamlit-folium/issues/128, got # closed becasue it is apparently a st.tabs problem import uuid, html # workaround for streamlit making tabs height 0 when not active, breaks map def inject_iframe_js_code(source: str) -> None: div_id = uuid.uuid4() st.markdown( f"""
""", unsafe_allow_html=True, ) def js_show_zeroheight_iframe(component_iframe_title: str, height: str = "auto"): source = f""" (function() {{ var attempts = 0; const maxAttempts = 20; // Max attempts to find the iframe const intervalMs = 250; // Interval between attempts in milliseconds function setIframeHeight() {{ const intervalId = setInterval(function() {{ var iframes = document.querySelectorAll('iframe[title="{component_iframe_title}"]'); if (iframes.length > 0 || attempts > maxAttempts) {{ if (iframes.length > 0) {{ iframes.forEach(iframe => {{ if (iframe || iframe.height === "0" || iframe.style.height === "0px") {{ iframe.style.height = "{height}"; iframe.setAttribute("height", "{height}"); console.log('Height of iframe with title "{component_iframe_title}" set to {height}.'); }} }}); }} else {{ console.log('Iframes with title "{component_iframe_title}" not found after ' + maxAttempts + ' attempts.'); }} clearInterval(intervalId); // Stop checking }} attempts++; }}, intervalMs); }} function trackInteraction(event) {{ console.log('User interaction detected:', event.type); setIframeHeight(); }} setIframeHeight(); document.addEventListener('click', trackInteraction); }})(); """ inject_iframe_js_code(source)