diff Applications/Samples/Web/simple-viewer-single-file.html @ 420:8bf717c4e497

canvas size is now defined by the parent div size
author am@osimis.io
date Mon, 19 Nov 2018 12:45:37 +0100
parents daa04d15192c
children
line wrap: on
line diff
--- a/Applications/Samples/Web/simple-viewer-single-file.html	Thu Nov 15 18:41:50 2018 +0100
+++ b/Applications/Samples/Web/simple-viewer-single-file.html	Mon Nov 19 12:45:37 2018 +0100
@@ -1,16 +1,17 @@
 <!doctype html>
 
 <html lang="us">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
-    <!-- Disable pinch zoom on mobile devices -->
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="HandheldFriendly" content="true" />
+  <!-- Disable pinch zoom on mobile devices -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <meta name="HandheldFriendly" content="true" />
 
-    <title>Simple Viewer</title>
-    <link href="samples-styles.css" rel="stylesheet" />
+  <title>Simple Viewer</title>
+  <link href="samples-styles.css" rel="stylesheet" />
 
 <body>
   <div id="breadcrumb">
@@ -18,11 +19,15 @@
     <span id="study-description"></span>
     <span id="series-description"></span>
   </div>
-  <div>
-    <canvas id="canvas" data-width-ratio="20" data-height-ratio="50"></canvas>
-    <canvas id="canvas2" data-width-ratio="70" data-height-ratio="50"></canvas>
+  <div style="height: calc(100% - 50px)">
+    <div style="width: 20%; height: 100%; display: inline-block">
+      <canvas id="canvas"></canvas>
+    </div>
+    <div style="width: 70%; height: 100%; display: inline-block">
+      <canvas id="canvas2"></canvas>
+    </div>
   </div>
-  <div id="toolbox">
+  <div id="toolbox" style="height: 50px">
     <input tool-selector="line-measure" type="radio" name="radio-tool-selector" class="tool-selector">line
     <input tool-selector="circle-measure" type="radio" name="radio-tool-selector" class="tool-selector">circle
     <button action-trigger="action1" class="action-trigger">action1</button>