Apache Superset Not Working - fullscreen of embedding dashboard

This is dashboard

  <div
    id="my-superset-container"
    style={{ width: "100vw", height: "100vh" }}
  ></div>
</div>

); };

Comment From: hugosjoberg

I have exactly the same issue, did anyone figure out how to solve it?

Comment From: hugosjoberg

Might as well respond since I was able to figure out a way to get it to work,

// filename App.js
import "./App.css"

function App() {

   const [width, setWidth] = useState("500px");
   const [height, setHeight] = useState("500px");
   const [embed, setEmbed] = useState("");

  useEffect(() => {
    const embed = async () => {
      await embedDashboard({
        id: "d3adcdb7-cc73-42e0-8907-d425758f21af", // given by the Superset embedding UI
        supersetDomain: "http://localhost:8088",
        mountPoint: document.getElementById("dashboard"), // html element in which iframe render
        fetchGuestToken: () => getToken(),
        dashboardUiConfig: {
          hideTitle: true,
          hideChartControls: true,
          hideTab: true,
        },
      })
    }
    if (document.getElementById("dashboard")) {
      embed()

    }
  }, [])

  return (
    <div className="App" width="100%" height="100%"  >
      <h1>How to Embed Superset Dashboard into React</h1>
      <div id="dashboard" className="embedded-superset"/>
    </div>
  )
}

And then create a App.css file:

.embedded-superset iframe {
  width: 100%;
  height: 1500px;
}

What confused me is that embedDashboard is injecting an iframe into the mounted component. So we need to apply styling to the iframe. Please note that I absolutely suck at frontend so if there is a neater way to update the iframe css in App.js I'm all ears.

Comment From: srinigk

I found a simpler fix, here is what I did. And it works for me. const Dashboard = () => { useEffect(() => { embedDashboard({ id: dashboardId, // given by the Superset embedding UI supersetDomain: "http://" + supersetDomain, mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe fetchGuestToken: () => fetchGuestTokenFromBackend(), dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional) hideTitle: true, hideTab: true, hideChartControls: true, filters: { expanded: false } } });

//hack to make the view 100% in height and width
document.getElementById("my-superset-container").children[0].width="100%";
document.getElementById("my-superset-container").children[0].height="100%";`

Comment From: neumartin

I did it like this:

    embedDashboard({
        id: "xxxxxxx", // given by the Superset embedding UI
        supersetDomain: "https://www.somedashboard.com",
        mountPoint: document.getElementById("dashboard-container"), // any html element that can contain an iframe

        fetchGuestToken: () => fetchGuestTokenFromBackend(),
        dashboardUiConfig: { // dashboard UI config: hideTitle, hideTab, hideChartControls, filters.visible, filters.expanded (optional)
            hideTitle: true,
            hideChartControls: false,
            hideTab: true,
            filters: {
                expanded: true,
            }
        },
    });

    const containerStyle = {
        width: '100%',
        height: '100vh',
        overflow: 'hidden',
    };

    const iframeStyle = {
        width: '100%',
        height: '100vh',
        border: 'none', // Remove iframe border if needed
    };

    useEffect(() => {
        const iframeSuperset = document.getElementById("dashboard-container").children[0];

        if (iframeSuperset) {
            iframeSuperset.width = "100%";
            iframeSuperset.height = "100%";
        }
    });

Comment From: rusackas

Since there are seemingly three working solutions on this thread, and it's been silent for 5 months, I'll go ahead and close this as resolved. Thanks for all the helpful pointers, everyone!

Comment From: Xyrai

The solutions mentioned in here are not meant for auto-scaling the height according to the content being loaded into the embedded superset iframe. They serve more as a temporary fix by setting a fixed height on the iframe itself.

Is there any way to add auto height scaling support to this embedded dashboard?

Comment From: JessieAMorris

I agree that having an autoscaling type option on the height would be really nice. It's hard to create dynamically scaled viewports currently.

Comment From: davigiroux

+1 on this, it's really annoying to embed long dashboards without dynamically setting the height.