Not Working - Fullscreen of embedding dashboard in Angular

[4ahul]

Always Small window of embedded dashboard in angular

embedDashboard() {
return new Observable((observer) => {
this.getToken().subscribe(
(token) => {
embedDashboard({
id: this.dashboardId,
supersetDomain: this.supersetUrl,
mountPoint: document.getElementById('superset_embedding_div_class')!,
fetchGuestToken: () => token["token"],
dashboardUiConfig: {
hideTitle: true,
hideChartControls: true,
hideTab: true,
filters: {
visible: false,
expanded: false
},
urlParams: {
standalone: "1",
show_filters: "0",
show_native_filters: "0"

          }
        },
        iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox']
      });
      observer.next();
      observer.complete();
    },
    (error) => {
      observer.error(error);
    }
  );
});

}`

html :

css :

iframe{
min-height: 100%;
min-width: 100%;
}

[dosubot[bot]]

Hey there, @4ahul! I'm here to help you with any bugs, questions, or contributions. Let's tackle this together!

I couldn't find specific information about CSS requirements for ensuring an embedded dashboard iframe takes up the full screen. However, you might want to try adjusting your CSS to ensure the parent container and the iframe itself are set to occupy the full viewport. Here's a suggestion:

html, body {
  height: 100%;
  margin: 0;
}

#superset_embedding_div_class {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

iframe {
  height: 100%;
  width: 100%;
  border: none;
}

This CSS ensures that both the parent container (#superset_embedding_div_class) and the iframe fill the entire viewport. Make sure that the parent elements of #superset_embedding_div_class also allow it to expand fully. Adjusting these styles should help the iframe take up the full screen.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Other}

[4ahul]

It didn't worked !!
@dosu