dosubot[bot] commented on issue #35900:
URL: https://github.com/apache/superset/issues/35900#issuecomment-3465948288

   <!-- Greeting -->
   Hi @xJOAN! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the 
superset team.
   
   <!-- Answer -->
   The layout difference happens because the embedded dashboard iframe does not 
include the top-level "ant-layout" CSS class and its `box-sizing: border-box` 
style, which the main Superset dashboard uses for consistent sizing and 
padding. This missing style affects how charts and components are rendered 
inside the iframe, leading to the visual mismatch you observed.
   
   To fix this, you can inject the following CSS into the embedded dashboard 
context:
   
   ```css
   .dashboard-component-chart-holder {
     width: 100%;
     box-sizing: border-box;
   }
   ```
   
   This approach has been confirmed to resolve the issue and make the embedded 
dashboard visually match the original view 
[reference](https://github.com/apache/superset/issues/34830). If you need to 
inject CSS dynamically, you can use a postMessage handler or customize your 
Superset instance to append styles to the iframe 
[reference](https://github.com/apache/superset/issues/32357).
   
   There’s currently no official way to extend global styles from the main app 
to embedded dashboards, and passing large CSS payloads through the iframe is 
discouraged. Systemic theming support is under development for future releases 
[reference](https://github.com/apache/superset/issues/32357).
   
   For best results, also ensure your iframe and its parent container match the 
native dashboard’s dimensions and do not have conflicting CSS constraints 
[reference](https://github.com/apache/superset/issues/34830).
   
   
   <!-- Dosu Comment Footer -->
   *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
   
   ---
   <sup>How did I do? 
[Good](https://app.dosu.dev/response-feedback/34682ce9-e452-479b-8aca-adcb34382a7d?feedback_type=great_response)
 | 
[Irrelevant](https://app.dosu.dev/response-feedback/34682ce9-e452-479b-8aca-adcb34382a7d?feedback_type=irrelevant_answer)
 | 
[Incorrect](https://app.dosu.dev/response-feedback/34682ce9-e452-479b-8aca-adcb34382a7d?feedback_type=incorrect_sources)
 | 
[Verbose](https://app.dosu.dev/response-feedback/34682ce9-e452-479b-8aca-adcb34382a7d?feedback_type=too_verbose)
 | 
[Hallucination](https://app.dosu.dev/response-feedback/34682ce9-e452-479b-8aca-adcb34382a7d?feedback_type=hallucination)
 | [Report 
🐛](https://app.dosu.dev/response-feedback/34682ce9-e452-479b-8aca-adcb34382a7d?feedback_type=bug_report)
 | 
[Other](https://app.dosu.dev/response-feedback/34682ce9-e452-479b-8aca-adcb34382a7d?feedback_type=other)</sup>&nbsp;&nbsp;[![Chat
 with 
Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=githu
 b)&nbsp;[![Join 
Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share
 on 
X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/35900)


-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]


---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]

Reply via email to