Responsive dynamicSizing not working

[subatomicglue]

I can't get dynamicSizing to work. It keeps setting the canvas to 300x150 I am trying to have a responsive design that takes up the full width of the iPhone screen in safari.

Angular2 component:

@ViewChild('cropper') cropper:ImageCropperComponent;
@ViewChild('croppedImage') croppedImage:any;
cropperSettings:any;
data:any;
constructor() {
  this.cropperSettings = new CropperSettings();
  this.cropperSettings.noFileInput = true;
  this.cropperSettings.preserveSize = true;
  this.cropperSettings.cropperClass = 'myCropper';
  this.cropperSettings.dynamicSizing = true;
  this.cropperSettings.keepAspect = true;
  this.data = {};
}

Component template HTML:

<img-cropper #cropper [image]="data" [settings]="cropperSettings" (cropPositionChange)="cropPositionChange($event)"></img-cropper>

Component CSS:

.myCropper {
  display: block;
  width: 50%;
  height: 300px;
}

Viewing in the browser, using inspect, I can see the canvas is 300x150. Resizing the browser does not change this. The parent element is definitely larger than 150

Debugging in Chrome I can see that the canvas initializes on the page as

<img-cropper _ngcontent-c13="" ng-reflect-settings="[object Object]" ng-reflect-image="[object Object]">
  <span class="ng2-imgcrop">
    <canvas class="myCropper"></canvas>
  </span>
</img-cropper>

But if I resize the browser window, this seemingly arbitrary 300x150 pops in!

<canvas class="myCropper"  width="300" height="150"></canvas>

There is nothing I can change, to get 300x150 to change. Unless I set dynamicSizing=false, then it'll initialize to whatever I have in this.cropperSettings.canvasWidth and this.cropperSettings.canvasHeight.

Also using 100% in canvasWidth and canvasHeight doesn't work:

this.cropperSettings.canvasWidth = '100%';
this.cropperSettings.canvasHeight = '100%';

It generates the canvas correctly:

<canvas class="myCropper"  width="100%" height="100%"></canvas>

But the element doesn't respond. It stays a tiny grey square in a sea of green:

<div class="cropper-wrapper green">
<canvas class="myCropper"  width="100%" height="100%"></canvas>
</div>

.green {
  background-color: #00ff00;
}
.cropper-wrapper {
  width: 100%;
  height: 900px;
}

Any ideas?

[hansanker]

Hi, I have the same problem. any solution yet?

[rqi14]

Same problem

[shansana]

Fixed this issue by adding a class to canvas.

in your component CropperSettings add --> this.cropperSettings.cropperClass = 'your-class' and then in main scss add --> .imgCropper{ width: 100% !important;}

hope this will help someone. :)