Mercurial > hg > orthanc-stone
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>