change canvas width to allow for mobile responsiveness

[sstripps1]

Currently the width of the canvas is determined by setting the width parameter in the canvas object eg:

dash_canvas.DashCanvas(
          width=800
       )

It would be nice to allow this to be changed via styling of the parent div. I think if the width is not specified it should match that of the parent div, and change as the parent div does. If the width is specified, then it should also change by the same ratio as the parent if the screen is squeezed/expanded.

[ycaokris]

A bit more explaination:

Since Canvas only provides customized setting for it's own width and height. At this moment, we're unable to figure out a workaround to maintain scale aspect ratio of figure loaded in line with canvas dimensions. We managed to adapt Canvas entity in responsive to different device width with the following css:

/*ipad 768px*/
/*Canvas image doesn't load full at small screen*/
/*Also, the `id` of dash_canvas.DashCanvas() doesn't appear in DOM */

@media only screen and (min-width: 500px) and (max-width: 850px) {
  /*set canvas witdh to be 600px;*/
  .canvas-outer > div > div {
    width: 600px !important;
    height: 333.75px !important;
  }


  .canvas-container {
    width: 600px !important;
    height: 333.75px !important;
  }
}

which has resulted in not-fully loaded image in small device.

@Marc-Andre-Rivet is the proper person to talk with regarding this responsiveness issue.

[emmanuelle]

waiting for the responsiveness wizards to have more bandwidth but I will spend time on this in the middle - end of the week.