I’ve added a button to an element in a desktop web application that a user can click to toggle between displaying that element in fullscreen mode and in normal mode. It’s an Angular application that uses NG Bootstrap. The element is the div with class modal-dialog that is generated by NG Bootstrap’s NgbModal component. (If anyone is wondering, I’m providing this tool so the dialog is accessible to users on a laptop screen at up to 200% magnification.)
It works great on Edge and Firefox on Windows, but in Chrome on Windows, instead of occupying the full screen, the element expands to occupy only the full browser tab. It’s still usable but I don’t understand why that’s happening. I even tried using the navigationUI option in the call to requestFullscreen (that is, replacing this.dialog.requestFullscreen(); with this.dialog.requestFullscreen({ navigationUI: 'hide' }); but it had no effect.
I know that my Chrome can display an element in genuine fullscreen mode because this demo supplied by MDN works: //jsfiddle.net/yookoala/oLc1uws0/
The structure of the code as reported by Chrome’s dev tools is as follows. The toggle button is within the modal-header.
<html lang="en">
<head>...</head>
<body class="modal-open" style="padding-right: 9px; overflow: hidden">
<app-root ngcspnonce="0HN93KJ077N770000010D" _nghost-ng-c792121200="" ng-version="17.1.1" aria-hidden="true">...</app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="scripts.js" defer=""></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
<ngb-modal-backdrop style="z-index: 1055" aria-hidden="true" class="modal-backdrop fade show"></ngb-modal-backdrop>
<ngb-modal-window role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-basic-title" class="d-block modal fade show">
<div role="document" class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
<div class="modal-content">
<div _ngcontent-ng-c3933563985="" class="modal-header">...</div>
<div _ngcontent-ng-c3933563985="" class="modal-body mb-3">...</div>
<div _ngcontent-ng-c3933563985="" class="modal-footer">...</div>
</div>
</div>
</ngb-modal-window>
</body>
</html>
The dev tools show additional content after the </html> tag: a #top-layer containing a div with a ::backdrop pseudoelement, the contents of which it won’t show me.
The toggle button is an Angular component with the following code:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dialog-fullscreen-button',
templateUrl: './dialog-fullscreen-button.component.html',
styleUrl: './dialog-fullscreen-button.component.scss',
})
export class DialogFullscreenButtonComponent implements OnInit {
dialog: Element;
ngOnInit(): void {
this.dialog = document.querySelector('ngb-modal-window .modal-dialog');
}
get canShowFullscreen() {
return this.dialog && this.dialog.requestFullscreen;
}
get isFullscreen() {
return document.fullscreenElement;
}
toggleFullscreen() {
if (!this.isFullscreen) {
this.dialog.requestFullscreen({ navigationUI: 'hide' });
} else {
document.exitFullscreen();
}
}
}
The button’s template:
@if (canShowFullscreen) {
<button
type="button"
class="btn shows-keyboard-focus"
[attr.aria-label]="isFullscreen ? 'Exit fullscreen mode' : 'Show dialog fullscreen'"
(click)="toggleFullscreen()">
<i [ngClass]="isFullscreen ? 'bi bi-fullscreen-exit' : 'bi bi-fullscreen'"></i>
</button>
}