examples will fill in their parent container

Viewer/assets/templates/default/defaultTemplate.html

@@ -9,8 +9,42 @@
     .icon {
         font-family: "babylon";
     }
+
+    fullscreen-container {
+        width: 100%;
+        height: 100%;
+
+        display: flex;
+        flex-direction: column;
+
+        justify-content: flex-start;
+        /* align items in Main Axis */
+        align-items: stretch;
+        /* align items in Cross Axis */
+        align-content: stretch;
+        /* Extra space in Cross Axis */
+    }
+
+    fullscreen-container>* {
+        flex: 1 1 auto;
+        flex-direction: row;
+
+        justify-content: flex-start;
+        /* align items in Main Axis */
+        align-items: stretch;
+        /* align items in Cross Axis */
+        align-content: stretch;
+        /* Extra space in Cross Axis */
+    }
+
+    html,
+    body {
+        width: 100%;
+        height: 100%;
+
+        margin: 0;
+        padding: 0;
+    }
 </style>
 
-<viewer></viewer>
-<loading-screen></loading-screen>
-<overlay></overlay>
+<fullscreen-container></fullscreen-container>

Viewer/assets/templates/default/fullscreenContainer.html

@@ -0,0 +1,3 @@
+<viewer></viewer>
+<loading-screen></loading-screen>
+<overlay></overlay>

Viewer/dist/ufoExample.html

@@ -9,10 +9,10 @@
         <style>
             babylon,
             #viewport {
-                max-width: 900px;
+                /*max-width: 900px;
                 max-height: 600px;
                 width: 100%;
-                height: 600px;
+                height: 600px;*/
             }
         </style>
     </head>

Viewer/src/configuration/types/default.ts

@@ -7,7 +7,14 @@ export let defaultConfiguration: ViewerConfiguration = {
             html: require("../../../assets/templates/default/defaultTemplate.html"),
             params: {
                 babylonFont: require('../../../assets/babylon.woff'),
-                noEscape: true
+                noEscape: true,
+                fillParent: true
+            }
+        },
+        fullscreenContainer: {
+            html: require("../../../assets/templates/default/fullscreenContainer.html"),
+            params: {
+                disable: false
             }
         },
         loadingScreen: {

Viewer/src/viewer/defaultViewer.ts

@@ -220,7 +220,6 @@ export class DefaultViewer extends AbstractViewer {
      */
     protected _prepareContainerElement() {
         this.containerElement.style.position = 'relative';
-        this.containerElement.style.display = 'flex';
     }
 
     /**
@@ -301,7 +300,6 @@ export class DefaultViewer extends AbstractViewer {
         return template.show((template => {
 
             var canvasRect = this.containerElement.getBoundingClientRect();
-            var canvasPositioning = window.getComputedStyle(this.containerElement).position;
 
             template.parent.style.display = 'flex';
             template.parent.style.width = canvasRect.width + "px";
@@ -380,14 +378,19 @@ export class DefaultViewer extends AbstractViewer {
         return template.show((template => {
 
             var canvasRect = this.containerElement.getBoundingClientRect();
-            var canvasPositioning = window.getComputedStyle(this.containerElement).position;
+            // var canvasPositioning = window.getComputedStyle(this.containerElement).position;
 
             template.parent.style.display = 'flex';
             template.parent.style.width = canvasRect.width + "px";
             template.parent.style.height = canvasRect.height + "px";
             template.parent.style.opacity = "1";
             // from the configuration!!!
-            template.parent.style.backgroundColor = "black";
+            let color = "black";
+            if (this.configuration.templates && this.configuration.templates.loadingScreen) {
+                color = (this.configuration.templates.loadingScreen.params &&
+                    <string>this.configuration.templates.loadingScreen.params.backgroundColor) || color;
+            }
+            template.parent.style.backgroundColor = color;
             return Promise.resolve(template);
         }));
     }