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;
}