HF Space Streamlit sidebar width and vertical scroll bar issues
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).huggingface.coStreamlit - a Hugging Face Space by giswqsDiscover amazing ML apps made by the communitySecond, the app accessed through the direct URL does not have a vertical scroll bar.https://giswqs-streamlit.hf.space/
2023-02-19T14:26:40Z
See the same app deployed on Streamlit Cloud (no sidebar width and scrollbar issue)https://geospatial.streamlit.app/
2023-02-19T16:36:44Z
It is probably not an iframe issue because the Space direct URL doesn’t have the vertical scroll bar either.
2023-02-20T00:19:44Z
Besides the scrollbar problem, the direct URLhttps://omnibus-static-test.hf.spacedoes not work.
2023-02-20T03:34:39Z
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/
2023-02-20T04:19:10Z
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.github.comgiswqs/streamlit-geospatial/blob/gh-pages/index.html<!DOCTYPE html>
<html>
  <head>
      <title>Streamlit for Geospatial</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
<!--begin first part of fixing Iframe scrollbar HERE -->
    <style>
    .container {
      position: relative;
      overflow: hidden;
      width: 100%;
      padding-top: 115%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    }
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;This file has been truncated.show original
2023-02-20T13:38:43Z
@OmnibusI just realized that the trick does not work on mobile. No scrollbar if viewing the site on a mobile phone.huggingface.coStatic Test - a Hugging Face Space by OmnibusDiscover amazing ML apps made by the community
2023-02-20T17:31:47Z
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.image1159×666 59.1 KB
2023-02-20T18:41:41Z
hi@Omnibusand@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.DockerfileFROM nginxinc/nginx-unprivileged:alpine
COPY . /usr/share/nginx/htmlReadme.md---
title: Diffusers Gallery
emoji: 🖼️
colorFrom: red
colorTo: green
sdk: docker
app_port: 8080
fullWidth: true
pinned: false
license: mit
---huggingface.coDockerfile · huggingface-projects/diffusers-gallery at mainWe’re on a journey to advance and democratize artificial intelligence through open source and open science.https://huggingface.co/spaces/huggingface-projects/diffusers-gallery/raw/main/README.md
2023-03-08T07:52:57Z
Could you explain the trick to solve the vertical scrollbar issue?