Embedded Dashboard ignores spacing between charts

[NeBene]

Bug description

I have embedded the Sales Dashboard Demo in a test angular application using the superset embedded sdk. The embedded Dashboard is not showing me the same spacing as the original Dashboard.

Original: Has spacing between all charts

Embedded: No Spacing between charts and unnecessary horizontal scrollbar:

Screenshots/recordings

No response

Superset version

master / latest-dev

Python version

I don't know

Node version

16

Browser

Firefox

Additional context

No response

Checklist

• [x] I have searched Superset docs and Slack and didn't find a solution to my problem.
• [x] I have searched the GitHub issue tracker and didn't find a similar bug report.
• [ ] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

[dosubot[bot]]

Hi @NeBene! I'm Dosu and I’m helping the superset team.

This is a known issue: embedded dashboards sometimes lose spacing between charts because the embedded iframe doesn't include some of the global styles (like the top-level ant-layout class and its box-sizing: border-box style) that the main Superset app uses. This affects how charts and components are rendered inside the iframe, leading to the layout problems you described.

A common workaround is to inject the following CSS into the embedded dashboard context to restore proper spacing:

.dashboard-component-chart-holder {
  width: 100%;
  box-sizing: border-box;
}

You can inject this CSS dynamically (for example, using a postMessage handler or by customizing your Superset instance to append styles to the iframe). Also, make sure your iframe and its parent container match the native dashboard's dimensions and don't have conflicting CSS constraints, which can help avoid unnecessary scrollbars. More details and discussion are available in this related issue: source.

Currently, there are no official configuration options in the embedded SDK to control layout or spacing between charts, but systemic theming support is under development for future releases. If you want to further customize the look, you can use the setThemeConfig API in the embedded SDK to tweak theme tokens, but this won't directly address the spacing issue unless you specifically target the affected classes.

If you continue to see issues, check for browser console errors and try in other browsers to rule out browser-specific quirks.

To reply, just mention @dosu.

---

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

[SatyamKumarCS]

Hi! I’d like to work on this issue. I’ve reviewed the details and can help reproduce the spacing bug and work on a fix for the embedded dashboard layout. If no one is actively working on it, please consider this assigned to me — I’ll start investigating and submit a PR.

[rusackas]

Do you have any custom CSS happening anywhere here? It seems like you might based on the space I do see around the markdown component, and there's a difference at the bottom of the filter bar too.

[chmelevskij]

Hi all, so this seems to be the same issue as https://github.com/apache/superset/issues/35900 and @dosubot is right about the problem.

Mainly there is following styles applied in the main app.

but in the embedded dashboard there is not .ant-layout wrapper which would have this classname causing the issue.

[dosubot[bot]]

You're exactly right—the missing .ant-layout wrapper and its box-sizing: border-box style in the embedded dashboard is the root cause of the spacing issue. This global style ensures consistent sizing and padding for charts in the main app, but it's absent in the iframe embed, leading to the layout discrepancies you described. Injecting a CSS rule like:

.dashboard-component-chart-holder {
  width: 100%;
  box-sizing: border-box;
}

into the embedded dashboard context restores the expected spacing and makes the embedded view visually match the original source.

For iframe-based embedding (using the official SDK), this CSS injection is the most effective workaround. If you're embedding via direct DOM injection (not using an iframe), recent changes added a scoped stylesheet (embed-overrides.less) under a .superset-embed wrapper to restore grid spacing without affecting standard dashboards source.

Theming support for embedded dashboards is improving—Superset 6.0 will let you customize appearance more robustly, and the SDK now supports dynamic theme configuration via setThemeConfig, though this doesn't directly fix grid spacing source.

If you need technical details about where layout and theming are handled in Superset, let me know!

To reply, just mention @dosu.

---

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

   

[chmelevskij]

As a workaround for those with the issue, it's possible to fix it with css templates. Adding something like:

*,
*::before,
*::after {
  box-sizing: border-box;
}

will give the same look like main dashboard.