Responsive canvas with Bootstrap

Question

I'm trying to deal with this problem. I already have a few canvas (working as layers) inside a bootstrap column. For now it is working correctly in computers but I want to make the canvas responsive for mobiles.

My column is this:

<div class="col-md-8 my-container2">

  <div>
    <div id="fileName"> Upload a fragments file
      <button id="infoPopover" type="button" class="btn btn-warning btn-xs btn-padding" data-container="body" data-toggle="popover" data-placement="right" data-content="Not file loaded" data-html="true">
        ?
      </button>
    </div>
  </div>

  <!-- ---------- CANVAS -------------------- -->
  <div id="canvasContainer" class="col-centered">
    <canvas id="myCanvasGrid" width="600" height="550"></canvas>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <canvas id="myCanvasLayer1" width="500" height="500"></canvas>
  </div>

</div>

and this my css:

 #canvasContainer{
   width: 600px;
   height: 550px;
   margin-bottom: 25px;
 }

 #myCanvas {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 2;
   margin-top: 25px;
   margin-left: 50px;
 }

 #myCanvasLayer1 {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
   margin-top: 25px;
   margin-left: 50px;
 }

 #myCanvasGrid {
   background-color: white ;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
 }

I have read and try some stuff like change the width for % and so but it always crash. This is how it looks now:

enter image description here

And this is how it looks if I put some % instead of px:

enter image description here

I just want to know what should I do responsive: the column? the canvas? because If I put that the column fit the 100%x100% it looks like the second picture and the canvas don't resize.

Thanks in advance.

Well the obvious problem is that your `canvas` elements all have a fixed width. — James Donnelly, Jan 07 '15 at 09:41
This is what happens with % on canvas: http://i.imgur.com/yjqstGx.png — Sergiodiaz53, Jan 07 '15 at 10:27
Possible duplicate: http://stackoverflow.com/questions/23973932/responsive-canvas-in-bootstrap-column — Billy Moat, Jan 07 '15 at 10:42

score 1 · Answer 1 · answered Feb 14 '16 at 13:51

Just add width: 100% in css. Also as a good practice instead of mentioning inline width and height, I'll suggest max-width and max-height in css

 #myCanvas {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 2;
   margin-top: 25px;
   margin-left: 50px;
   width: 100%;
 }

 #myCanvasLayer1 {
   background-color: transparent;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
   margin-top: 25px;
   margin-left: 50px;
   width: 100%;
 }

 #myCanvasGrid {
   background-color: white ;
   border:1px solid #000000;
   position: absolute;
   z-index: 1;
   width: 100%;
 }

Responsive canvas with Bootstrap

1 Answers1