semantic ui modal and cropper.js

I am try to add cropper.js in semantic modal. i am doing following step.

1) I have button on page called [Choose image]

2) If i am click on choose image one modal is open name is [thumbs]. thumbs modal have 2 button [choose from local pc] and [choose media].

3) If i am click on choose from local pc file dialog is open and image picker is working and cropper.js is assign to selected image perfect

4) If i am click on choose media button they open [media] modal and i have lots of images there and i have one button on each image if i am click on image path is pass to previous modal called thumbs and cropper tool is assigned but size is smaller as given size, if i am open inspect element of chrome cropper size is perfect.

You will better idea using following images.

http://prnt.sc/cnof60

http://prnt.sc/cnofei

http://prnt.sc/cnofne

http://prnt.sc/cnofxs

If see last 2 images you can difference in image.

I am using https://fengyuanchen.github.io/cropperjs/ for cropper function.

Thanks

When you init your cropper pass minContainerWidth and minContainerHeight. here i am passing 846 and 280.

var image = $("#img-preview-media-mobile");
var cropper = image.cropper(
{
    dragMode: 'move',
    autoCropArea: 1,
    cropBoxMovable: false,
    cropBoxResizable: false,
    viewMode: 3,
    minContainerWidth: 846,
    minContainerHeight: 280,
    crop: function(e) 
    {
        var image_data = e.x +"#"+ e.y +"#846#280";
        $("#img-preview-media-web-image-data").val(image_data);
    }
});


and in cropper.js file change following line

/*$cropper.css((this.container = {
    width: max($container.width(), num(options.minContainerWidth) || 200),
    height: max($container.height(), num(options.minContainerHeight) || 100)
}));*/

$cropper.css((this.container = {
    width: options.minContainerWidth ,
    height: options.minContainerHeight
}));

Line number 806 to 809 in cropper js