Layout distorted

[aario]

Expected Behavior

As in the croppie website

Actual Behavior

Here is the html generated:

<div class="row">
    <div class="col">
        <div id="croppie" class="croppie-container"><div class="cr-boundary" aria-dropeffect="none">
                <img src="/images/media/example-profile-photo.jpg" class="cr-image" style="opacity: 1; transform: translate3d(2.16289px, 48px, 0px) scale(1.105); transform-origin: -220.163px 96px;">
                <div class="cr-viewport cr-vp-square" tabindex="0" style="width: 192px; height: 288px;"></div>
                <div class="cr-overlay" style="width: 141.44px; height: 212.16px; top: 37.92px; left: 339.28px;"></div>       
        </div>
        <div class="cr-slider-wrap">
                <input class="cr-slider" type="range" step="0.0001" aria-label="zoom" min="0.4800" max="1.5000" aria-valuenow="1.105">
        </div>
    </div>
</div>

Steps to Reproduce the Problem

1. Have bootstrap 4
2. Have this html:

   <div class="row">
   <div class="col">
       <div id="croppie"></div>
   </div>
   </div>

3. Have this javascript:

       croppieDiv = dialogDiv.find("#croppie").first(),
       dialogCropper = croppieDiv.croppie(
           {
               viewport: {
                   width: imgDiv.outerWidth() * 1.5,
                   height: imgDiv.outerHeight() * 1.5 
               },
               enableExif: true
           }
       ),
       dialogBtnPrimary = dialogDiv.find("#btn-primary").first();
   
   dialogBtnPrimary.on("click", () => {
       dialogCropper.croppie(
           "bind",
           { url: data["src"] }
       );
   });

Example Link

Specifications

• Browser: Chromium
• Version: 83.0.4103.116 (Developer Build) built on Debian 10.4, running on Debian 10.4 (64-bit)

[aario]

croppie.css file was not included