iPhone Notch White Space

🎈 Using Streamlit
,
1

Hi Everyone,

Just a quick question on how to show fill the white space above the header? (screenshot, area of the clock & batter / camera notch)

I am opening the app on iOS, where the white space is shown at the camera notch.

Is it possible to match that notch area with color #0e1117 (the dark mode)

Thank you very much in advance.

White Space on Top
White Space on Top749×377 6.85 KB

Tried to add, but

css = """
<style>
                #MainMenu {visibility: hidden;}
                footer {visibility: hidden;}
                header {visibility: hidden;}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
"""
st.markdown(css , unsafe_allow_html=True)

But it is still showing white blank space on the iPhone notch

2

Hi,

The trick is to customize the relevant CSS element which may require some iteration of trial and error in identifying the CSS element name, which can be done via the use of Google Chrome’s View > Developer > Inspect Elements

I made a video on how to do this:

Hope this helps!