HF Space Streamlit sidebar width and vertical scroll bar issues

Spaces
1

I deployed a streamlit app on HF Space and noticed two issues. First, the sidebar width is too big (~1/3 of the page width).

Second, the app accessed through the direct URL does not have a vertical scroll bar.
https://giswqs-streamlit.hf.space/

2

See the same app deployed on Streamlit Cloud (no sidebar width and scrollbar issue)
https://geospatial.streamlit.app/

4

It is probably not an iframe issue because the Space direct URL doesn’t have the vertical scroll bar either.

7

Besides the scrollbar problem, the direct URL https://omnibus-static-test.hf.space does not work.

1 Like
10

Thank you very much for sharing your solution. I can confirm that the trick solves the vertical scrollbar issue. Hope the HF team can solve the issue so that iframing an HF space works out of the box.

Now my streamlit app has a vertical scrollbar!
https://streamlit.gishub.org/

12

I also use glitch for simple static website hosting. GitHub Pages is another good option as it allows custom domains. Hope HF will support custom domains in the future.

Here is how to use GitHub custom domain to embed HF space.

1 Like
13

@Omnibus I just realized that the trick does not work on mobile. No scrollbar if viewing the site on a mobile phone.

1 Like
15

Yes, the modified css works on mobile now, but it ends up with two vertical scrollbars and a white border on desktop with a dark mode.

image
image1159Ă—666 59.1 KB

1 Like
19

hi @Omnibus and @giswqs ,
We’re working on a fix for the static sdk, so it behaves as expected. The way I did for the gallery, was to spin off a simple Docker nginx server, you can follow it here.

Dockerfile

FROM nginxinc/nginx-unprivileged:alpine
COPY . /usr/share/nginx/html

Readme.md

---
title: Diffusers Gallery
emoji: 🖼️
colorFrom: red
colorTo: green
sdk: docker
app_port: 8080
fullWidth: true
pinned: false
license: mit
---

https://huggingface.co/spaces/huggingface-projects/diffusers-gallery/raw/main/README.md

20

Could you explain the trick to solve the vertical scrollbar issue?

1 Like