correctly style canvas to fill users div.

3 years ago · c1a3974fb0
4 changed files with 16 additions and 10 deletions
--- a/src/Web/Avalonia.Web.Sample/Program.cs
+++ b/src/Web/Avalonia.Web.Sample/Program.cs
@ -18,7 +18,7 @@ internal partial class Program

    private static void Main(string[] args)
    {
-        BuildAvaloniaApp().SetupBrowserApp("out1");
+        BuildAvaloniaApp().SetupBrowserApp("out");
    }

    public static AppBuilder BuildAvaloniaApp()
--- a/src/Web/Avalonia.Web.Sample/index.html
+++ b/src/Web/Avalonia.Web.Sample/index.html
@ -14,15 +14,14 @@

 <body>
    <style>
-        canvas.avalonia-canvas {
-            opacity: 1;
-            background-color: lawngreen;
-            position: fixed;
-            width: 100vw;
-            height: 100vh;
-            top: 0px;
-            left: 0px;
-            z-index: 500;
+        body{
+            margin: 0;
+        }
+
+        div#out{
+            position:fixed;
+            width:100vw;
+            height:100vh;
        }
    </style>
    <div id="out" tabindex="0"></div>
--- a/src/Web/Avalonia.Web/AvaloniaView.cs
+++ b/src/Web/Avalonia.Web/AvaloniaView.cs
@ -53,6 +53,11 @@ namespace Avalonia.Web
        {
            var div = GetElementById(divId);

+            if(div == null)
+            {
+                throw new Exception($"div with id: {divId}, was not found in the html document.");
+            }
+
            _canvas = CreateCanvas(div);
            _canvas.SetProperty("id", $"avaloniaCanvas{_canvasCount++}");

--- a/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts
+++ b/src/Web/Avalonia.Web/webapp/modules/avalonia/canvas.ts
@ -25,6 +25,8 @@ export class Canvas {

    public static createCanvas(element: HTMLDivElement): HTMLCanvasElement {
        var canvas = document.createElement("canvas");
+        canvas.style.setProperty("width", "100%");
+        canvas.style.setProperty("height", "100%");

        element.appendChild(canvas);
        canvas.classList.add('avalonia-canvas');