Uploaded image don't use all the available space when using init-max-area="true"

I’ve been trying to use ui-cropper to crop and upload an image. To do this, I created a div to show the uploaded image and the crop tool, using the following code:

<div 
    ngf-drop 
    ng-model="headerImage" 
    ngf-pattern="image/*" 
    class="cropArea"
    flex>
    <ui-cropper
        image="headerImage | ngfDataUrl"
        area-type="rectangle"
        ng-init="croppedDataUrl=''"
        aspect-ratio="2.6"
        result-image="croppedDataUrl"
        result-image-size="{w:960,h:370}"
        init-max-area="true">
    </ui-cropper>
</div>

<div>
    <img ng-src="{{croppedDataUrl}}" alt=""/>
</div>

But when I upload an image, the image is not using the entire space of the ui-crop area, like this:

What can it be?

[smohammedyasin]

i was having same issue. after i added reference of ui-cropper.css then canvas worked perfectly.

[CrackerakiUA]

I am not using this feature, but from what i have seen in my tests, you have to add something in the css. In near feature i will checkup codepens and add one with this feature.