Thanks to visit codestin.com
Credit goes to github.com

Skip to content

components.html(..., height=0) still renders ~150px vertical space (cannot collapse to 0) #12454

@csipapicsa

Description

@csipapicsa

Checklist

  • I have searched the existing issues for similar issues.
  • I added a very descriptive title to this issue.
  • I have provided sufficient information below to help reproduce this issue.

Summary

When using streamlit.components.v1.html with height=0, the component still reserves ~150px of vertical space in the layout. Setting height=1 reduces the space but still does not allow a true zero-height render.

Reproducible Code Example

Open in Streamlit Cloud

import streamlit as st
import streamlit.components.v1 as components

wake_lock_js = """
<script>
  let wakeLock = null;
  async function requestWakeLock() {
    try {
      wakeLock = await navigator.wakeLock.request('screen');
      console.log('Wake Lock is active!');
    } catch (err) {
      console.error('Wake Lock request failed:', err);
    }
  }
  if ('wakeLock' in navigator) {
    requestWakeLock();
  } else {
    console.log('Wake Lock API not supported in this browser.');
  }
</script>
"""

st.write("Test")
st.divider()

st.write("Components height test. Height = 0")
components.html(wake_lock_js, height=0)
st.divider()

st.write("Components height test. Height = 1")
components.html(wake_lock_js, height=1)
st.divider()

st.write("No components")
st.divider()
st.write("Test end")
st.divider()

Steps To Reproduce

Run the script above on Streamlit 1.49.1.

Observe the vertical space after the height=0 component call.

Change to height=1 and observe the vertical space changes

Expected Behavior

height=0 should render the component with no vertical space (i.e., collapse to 0px).

height=1 should render with effectively 1px (or visually negligible) space.

Current Behavior

height=0 renders roughly ~150px space in the layout.

height=1 reduces the space but still doesn’t allow a true zero-height render.

In the frontend inspector, the container appears to enforce a minimum height (looks like ~150px), ignoring the explicit 0 height passed.

Image

Is this a regression?

  • Yes, this used to work in a previous version.

Debug info

  • Streamlit version: 1.49.1
  • Python version: 3.9 / 3.12
  • Operating System: Windows / Linux
  • Browser: Chrome

Additional Information

connected issue is #12340

Metadata

Metadata

Assignees

Labels

area:layoutRelated to layout and positioningfeature:custom-componentsRelated to custom componentspriority:P2Medium-high priority - fix within one monthstatus:confirmedBug has been confirmed by the Streamlit teamtype:bugSomething isn't working as expected

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions