Apache Superset Embedded iframe of Superset dashboard does not match original layout

Screenshot

Dashboard in superset:

Dashboard in iframe:

Description

I am running a self-hosted Superset instance (using the official docker-compose.yml setup).
When embedding a dashboard in an iframe using @superset-ui/embedded-sdk, the layout/appearance inside the iframe does not match the original dashboard.

I expect the iframe version to look identical to the normal dashboard view, but the embedded version looks different (see attached screenshots).

Environment details:
- Superset: self-hosted via docker-compose
- Browser: Chrome
- SDK: @superset-ui/embedded-sdk

Embed code I am using:

embedDashboard({
  id,
  supersetDomain: "...",
  mountPoint: containerRef.current!,
  fetchGuestToken: async () =>
    getGuestToken({ DashboardId: id }, token),
  dashboardUiConfig: {
    hideTitle: true,
    urlParams: { standalone: 1 },
  },
  iframeSandboxExtras: ["allow-same-origin", "allow-scripts"],
})
  .then(() => {
    console.log("Dashboard embedded");
  })
  .catch((err) => {
    console.error("Embedding failed", err);
  });

Additional Notes

I do not think this issue is related to global styles or index.css. I verified this by testing with a minimal setup that had no global styling. The problem appears to be chart sizing, the charts in the iframe render at the wrong sizes, not due to unnecessary padding. I confirmed this by inspecting the CSS in the browser.

Comment From: dosubot[bot]

Hi @JonathanAhrenkiel-Frellsen! I'm Dosu and I’m helping the superset team.

The embedded dashboard uses the same grid layout and chart sizing logic as the native Superset dashboard view. Chart sizes are determined by the dashboard's saved layout metadata and grid configuration, with chart width and height calculated based on grid units, column widths, and the parent container's dimensions. The embedDashboard SDK does not provide explicit controls for chart sizing or layout beyond hiding UI elements and passing URL parameters like standalone=1—these do not affect the grid or chart sizes themselves¹².

Any differences in chart sizing or layout between the embedded and native dashboards are most likely due to the outer iframe or container sizing, or CSS constraints set by the embedding application, not by Superset's internal rendering logic²³. To ensure the embedded dashboard matches the original layout, set explicit width and height attributes on the iframe and make sure the parent container matches the dimensions of the native dashboard view⁴. Also, check for any CSS rules in your embedding app that might affect the iframe or its contents.

Recent improvements allow you to pass theme configuration to the embedded dashboard for visual consistency, but this does not control chart sizing or grid layout⁵⁶.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

Comment From: JonathanAhrenkiel-Frellsen

I resolved the issue, not sure if it is the best practice. I still wanted to share it in case someone else gets the same issue in the future. I updated the following css class: .dashboard-component-chart-holder { width: 100%; height: 100%; box-sizing: border-box; // <-- added this line background-color: ${theme.colorBgContainer}; position: relative; padding: ${theme.sizeUnit * 4}px; overflow-y: visible;

Now the iframe looks identical to the superset dashboard. I also tried to do the same with the css templates instead, but not sure how they work so I could not get it to work.