Croppie position issue

by rluuan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://foliotek.github.io/Croppie/croppie.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<script src="http://foliotek.github.io/Croppie/croppie.js"></script>
<div id="ProfilePicture" data-image-path="https://businesshubstaging.blob.core.windows.net/sitefiles/test/person.jpg">

</div>
<div id="ProfilePictureDialog" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4>Profile picture...</h4></div>
      <div class="modal-body">
        <div id="CropArea"></div>
      </div>
      <div class="modal-footer">
        <div id="RotateAntiClockwise" class="btn btn-primary" title="Rotate anti-clockwise"><span class="fa fa-rotate-left"></span></div>
        <div id="RotateClockwise" class="btn btn-primary" title="Rotate clockwise"><span class="fa fa-rotate-right"></span></div>

        <button id="AcceptCropButton" type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>


      </div>
    </div>
  </div>
</div>
<div class="btn btn-primary" data-toggle="modal" data-target="#ProfilePictureDialog">Show Dialog</div>

CSS

/* This is using croppie.js v2.1.0 */


/* With the enableOrientation option set to true, the image isn't displayed */

JavaScript

var $uploadCrop;

$uploadCrop = $("#CropArea").croppie({

  boundary: {
    width: 400,
    height: 400
  },
  viewport: {
    width: 300,
    height: 300,
    type: 'square'
  },
  customClass: 'crop-area',
  enableExif: true,
  enableOrientation: false,
  
});
$uploadCrop.croppie('setZoom', 0);  

var imagePath = $('#ProfilePicture').data('image-path');
$uploadCrop.croppie('bind', imagePath);

$('#ProfilePictureDialog').on('shown.bs.modal', function() {
    $uploadCrop.croppie('bind', function() {
    	points: [0, 0, 0, 0]
    });
});

$("#RotateAntiClockwise").on("click", function() {
  $uploadCrop.croppie('rotate', -90);
});
$("#RotateClockwise").on("click", function() {
  $uploadCrop.croppie('rotate', 90);
});