Remove scrolls on Angular application canvas

I have Angular version of 11.0.0. In order to see dashboards of other Angular applications from mine, I had to expand both width and height to 110% and 900 px respectively []. The goal is that every Angular application can be seen without any scroll.

I asked AI, it proposed 3 steps as answer:

1. (HTML)

<p-panel header="Dashboard" [toggleable]="true"><!--[src]="view && viewDashboardUrl | safe"-->
<iframe #iframe [src]="view && viewDashboardUrl | safe"
class="dashboard-iframe"
style="width: 100%; border: none; height:100%; background-color: white !important;"
frameborder="0" scrolling="no"></iframe> <!--width:100%;height: 100vh-->
</p-panel>

1. (TS)

@Component({
selector: 'app-thing-management',
templateUrl: './thing-management.component.html',
styles: [`
.dashboard-iframe {
background-color: white !important;
filter: none !important;
overflow: hidden !important;
width: 100% !important;
height: 100% !important;
}

/* Ensure the panel containing the iframe also has white background */
p-panel .p-panel-content {
background-color: white !important;
overflow: hidden !important;
padding: 0 !important;
}

/* Override any dark theme styles for the iframe container */
.p-panel .p-panel-content-wrapper {
background-color: white !important;
overflow: hidden !important;
}

/* Make sure the panel expands to fit content */
.p-panel {
height: auto !important;
min-height: 600px !important;
}
`]
})

1. (TS)

async getSrc() {
// Add parameters for a full visualization without any scroll
let url = this.view.parameter['dashboardUrl'] +
(this.selectedThingIds.map(th => `var-thingId=${th}`)).join('&') +
'&kiosk&hideScrollbar=1&viewPanel=1&fullscreen';

// Update the URL of dashboard
this.viewDashboardUrl = url;

// Make sure the iframe fits rightly after loading
setTimeout(() => {
if (this.iframe && this.iframe.nativeElement) {
this.iframe.nativeElement.onload = () => {
try {
// try to comunicate with the iframe to fit its size
const iframeDoc = this.iframe.nativeElement.contentDocument ||
this.iframe.nativeElement.contentWindow.document;

if (iframeDoc) {
// Remove scrollbars from content of the iframe
const style = iframeDoc.createElement('style');
style.textContent = 'body { overflow: hidden !important; }';
iframeDoc.head.appendChild(style);
}
} catch (e) {
// Warning, we can not access the content
console.log('We can not access the content of iframe by security polícies');
}
};
}
}, 100);
}


I did those changes, it went worst because it reduced all the views of the dashboards.

Continue reading...