correctly style canvas to fill users div.

4 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 {
+        body{
-            opacity: 1;
+            margin: 0;
-            background-color: lawngreen;
+        }
-            position: fixed;
+
-            width: 100vw;
+        div#out{
-            height: 100vh;
+            position:fixed;
-            top: 0px;
+            width:100vw;
-            left: 0px;
+            height:100vh;
            z-index: 500;
        }
    </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');