CODEWITHSUNDEEP
javascripthtmlcsshtml5-canvas
DEKKER
DEKKER

Reputation: 911

Giving maximum height and width equally to canvas in HTML/CSS

I am trying to set a layout for my web app. I want to have 2 canvases to fill most of the window and 4 image buttons at the bottom. Here is what I am trying to achieve:

What I want

But I get it all screwed in the browser. The canvas are small! No matter what I put as height or width of the dives or the canvas itself in the CSS file. I want them to be be ideally 800x600 and resize with the same ratio if the window is being resized.

Real result

Here are my HTML and CSS:

body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
  background-color: antiquewhite;
}

#previewWrapper div {
  display: table-cell;
  height: auto;
}

#leftCanvas #rightCanvas {
  height: 800px;
  width: 600px;
  border: 1px solid #cccccc;
  background-color: #DC0A2F;
}

.previewButtons {
  text-align: center;
}
<html>

<head>
  <title>WebSocket Echo Client</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="fitToPage" id="canvas"></div>
  <header>
    <img class="logo" src="./content/GUI/logo_weiss.svg" alt="Elten Logo" onclick="goHome();" />
    <a href="#Herunterfahren">Herunterfahren</a>
    <a href="#Neustart">Neustart</a>
  </header>

  <!-- HERE IS THE ISSURE -->

  <div id="previewWrapper" class="footPreviewContainer">
    <canvas id="leftCanvas"></canvas>
    <canvas id="rightCanvas"></canvas>
  </div>

  <div class="previewButtons">
    <img id="actionButtonPreview" class="logo" src="./content/GUI/button_preview.svg" alt="Vermessungsbutton" onclick="initWebSocket();">
    <img id="actionButtonStop" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="stopWebSocket();">
    <img id="actionButtonMeasure" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="checkSocket();">
    <img id="actionButtonSendMessage" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="sendMessage();">
  </div>

</body>

</html>

Upvotes: 2

Views: 515

Answers (2)

MaxiGui
MaxiGui

Reputation: 6348

You only have to add a bit css. I add it directly to style inline, like this you can fix it easily

  <div id="previewWrapper" class="footPreviewContainer" style="display:flex; height:auto; max-height:600px;">
    <canvas id="leftCanvas" style="height:100%;width:800px;"></canvas>
    <canvas id="rightCanvas" style="height:100%;width:800px;"></canvas>
  </div>

The first thing is to fix the height of the previewWrapper. And then width in for the canvas.

body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: auto;
  background-color: antiquewhite;
}

#previewWrapper div {
  display: table-cell;
  height: auto;
}

#leftCanvas #rightCanvas {
  height: 800px;
  width: 600px;
  border: 1px solid #cccccc;
  background-color: #DC0A2F;
}

.previewButtons {
  text-align: center;
}
<html>

<head>
  <title>WebSocket Echo Client</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="fitToPage" id="canvas"></div>
  <header>
    <img class="logo" src="./content/GUI/logo_weiss.svg" alt="Elten Logo" onclick="goHome();" />
    <a href="#Herunterfahren">Herunterfahren</a>
    <a href="#Neustart">Neustart</a>
  </header>

  <!-- HERE IS THE ISSURE -->

  <div id="previewWrapper" class="footPreviewContainer" style="display:flex; height:auto; max-height:600px;">
    <canvas id="leftCanvas" style="height:100%;width:800px;"></canvas>
    <canvas id="rightCanvas" style="height:100%;width:800px;"></canvas>
  </div>

  <div class="previewButtons">
    <img id="actionButtonPreview" class="logo" src="./content/GUI/button_preview.svg" alt="Vermessungsbutton" onclick="initWebSocket();">
    <img id="actionButtonStop" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="stopWebSocket();">
    <img id="actionButtonMeasure" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="checkSocket();">
    <img id="actionButtonSendMessage" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="sendMessage();">
  </div>

</body>

</html>

Upvotes: 1

pilchard
pilchard

Reputation: 12911

The easiest solution is to use display:flex; on the preview container and set the height using vh (view height) units. The defaults will cause the children canvases to stretch to fill the height, and you can then choose how to align them. They are set to justify-content: space-around; in the below snippet which evenly divides any free space on both sides of the children elements.

#previewWrapper {
  height: 85vh;
  display: flex;
  justify-content:space-around;
}

canvas {
  width: 46vw;
}


body {
  margin: 0;
}

header {
  margin: 0;
  background-color: #DC0A2F;
  height: 50px;
}

header img.logo {
  width: 150px;
  height: auto;
  padding: 13px 13px 0px 13px;
}

header a {
  color: white;
  text-decoration: none;
  float: right;
  padding: 15px;
  font-family: Consolas;
  font-weight: revert;
}

header a:hover {
  padding-top: 16px;
}

html,
body {
  height: 100%;
}

main {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

main.index {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #888888;
}

main img.menu {
  width: 250px;
  height: auto;
  padding: 50px;
}

table {
  font-size: 130%;
}

th {
  background-color: #888888;
  border-color: white;
}

td {
  background-color: white;
  border-bottom: solid 1px #888888;
  border-right: solid 1px #888888;
}

img.index {
  width: 400px;
  height: auto;
}

.ergebniss {
  margin: 50px;
}

svg.header {
  width: 125px;
  height: 30px;
  margin-top: 10px;
}

.vorschau {
  margin: 100px;
}

canvas{ border: 1px solid black; background-color: red;}

.footPreviewContainer {
  height: 800px;
  text-align: center;
}

#previewWrapper {
  height: 85vh;
  display: flex;
  justify-content:space-around;
}

canvas {
  width: 46vw;
 }
<html>

<head>
  <title>WebSocket Echo Client</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class="fitToPage" id="canvas"></div>
  <header>
    <img class="logo" src="./content/GUI/logo_weiss.svg" alt="Elten Logo" onclick="goHome();" />
    <a href="#Herunterfahren">Herunterfahren</a>
    <a href="#Neustart">Neustart</a>
  </header>

  <!-- HERE IS THE ISSURE -->

  <div id="previewWrapper" class="footPreviewContainer">
    <canvas id="leftCanvas"></canvas>
    <canvas id="rightCanvas"></canvas>
  </div>

  <div class="previewButtons">
    <img id="actionButtonPreview" class="logo" src="./content/GUI/button_preview.svg" alt="Vermessungsbutton" onclick="initWebSocket();">
    <img id="actionButtonStop" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="stopWebSocket();">
    <img id="actionButtonMeasure" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="checkSocket();">
    <img id="actionButtonSendMessage" class="logo" src="./content/GUI/button_messen.svg" alt="Vermessungsbutton" onclick="sendMessage();">
  </div>

</body>

</html>

Upvotes: 1

Related Questions