calling streamlit_js_eval creates visible iframe

[DevDrake]

when i call :
streamlit_js_eval(js_expression='window.innerwidth', key='WIDTH')
it creates visible iframe in streamlit app:
I understand, it has to create something to get the property, but can it have opacity=0 or just a way to setup css on the component form streamlit app ?

[aghasemi]

Hi. I will try to reproduce this and see. It seems the internals of Streamlit custom components have changed recently.

[hoanq1811]

I also have the same issue with @DevDrake

[shawngiese]

 <style>
                iframe{
                    display: none
                }

[aghasemi]

@DevDrake @hoanq1811

I cannot reproduce the issue in streamlit 1.31.1. Can you send an example please?

Anyways, the solution by @shawngiese should work. I don't know about further consequences though. It's like this

st.markdown(f"<style>iframe{display: none}</style>",unsafe_allow_html=True)

[liuhang2]

how to customize css ,backgroud-color like photo,

[ZJCODE]

same question in 1.35.0

[jonn26]

If all of your jscode doesn't need to display anything and you have other iframes(custom components) you don't want to hide, you can use this to hide just streamlit_js_eval iframes

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