Component does not render on iOS devices about streamlit-ace

[ahmed-881994]

@RichDom2185 thank you it worked like a charm 🙏

[ahmed-881994]

I am facing the same issue version 0.1.1 streamlit version 1.29.0
screenshot from PC:

screenshot from iphone ios 17.2.1

[RichDom2185]

I am facing the same issue version 0.1.1 streamlit version 1.29.0 screenshot from PC: screenshot from iphone ios 17.2.1

Hi, I figured out a (workaround) solution – after inspecting the rendered HTML on both iOS and non-iOS, it seems like on iOS/iPadOS devices, the initial editor component is not automatically set.

The workaround is to provide an explicit height when creating the component:

from streamlit_ace import st_ace

# ...

st_ace(height=252,
       # ... your other options
      )

I used 252 because that's equal to the default height that would be shown in case you never pass in a height options, but of course feel free to change it accordingly.

---

Sidenote: When deploying, using a reverse proxy like NGINX to force the user agent to be non-iOS will not work, as Streamlit renders via React on the client side, so this is an issue seemingly specific to the way iOS/iPadOS renders on the client-side. Surprisingly, requesting "desktop website" on iOS/iPadOS also seems to solve the issue, though. Perhaps there might be some weird changes to how iOS/iPadOS renders content when toggling between mobile/desktop mode?