when croppie is bound to an element zoom starts really big, I want the image to be scaled to the boundary element

[paulpreibisch]

Expected Behavior

when I bind croppie to an element, the image should be displayed inside the boundary, and the zoom slider should be in the center

Actual Behavior

when I bind, I start at a very huge zoom level, and slider is way to the right

Steps to Reproduce the Problem

  $('#puzzle-piece-modal').modal('show');
               var croppie = new Croppie(document.getElementById('cropContainer'), {
                   viewport: {
                       width: 323,
                       height: 200,
                       type: 'square'
                   },
                   boundary: {
                       width: 646,
                       height: 400
                   },
                   enableZoom: true,

                   enableOrientation: true,
                   enforceBoundary: true
               });
               
               croppie.bind({
                   url: "/hunt/"+response.imageUrl,
                   points: [77,469,280,739],
                   orientation: 1,
                   zoom: 1
               });

Specifications

• Browser: firefox
• Version:
  

[paulpreibisch]

[paulpreibisch]

I was able to fix by modifying class of the modal-dialog, and making sure that the boundary of croppie was smaller than the size of the modal (400px)

/* to ensure that croppie image doesnt overflow the modal */
#puzzlePieceDialog{
    overflow: hidden;
    padding:10px;
}