search

advanced-cropper / vue-advanced-cropper

The advanced vue cropper library that gives you opportunity to create your own croppers suited for any website design
https://advanced-cropper.github.io/vue-advanced-cropper/
Other
931 stars 130 forks source link

Cropper doesn't take parent's height when parent is relative #169

Closed Daedren closed 2 years ago

Daedren commented 2 years ago

Hello! I'm coming across an issue when trying to use the cropper.

When a cropper with height: 100%; is inside a parent with an proper fixed height, it'll contract to the parent's height, this is as it should and is fine.

However, if the parent's height is relative, or is a flex item, the cropper will ignore the space it is allocated.

https://codesandbox.io/s/vue-advanced-cropper-issue-169-43wvm?file=/src/App.vue

In this example, if you remove the <cropper> from the template, you'll see the parent has the remaining flex size since it has flex: 1, but the cropper was ignoring that, despite having height: 100%.

There's a #cropperParent_OtherChild with display: none there, if you hide the cropper and show that one, that follows the behavior I was expecting.

Norserium commented 2 years ago

@Daedren, hello! Are you sure, that you provided the correct link to the codesandbox? Currently, you provided the link to my own template.

Daedren commented 2 years ago

Oh whoops, I messed up.

I've updated the original comment with the correct link.

Norserium commented 2 years ago

@Daedren, in other words, do you want to get this result? image

Daedren commented 2 years ago

Yeah that would be my objective. Am I messing something up on my end?

Norserium commented 2 years ago

@Daedren, well, there is the detail, that you actually missed.

First of all, the cropper tries to stretch the container as much as possible to fit the image completely by setting the fixed height and width to the stretcher: image

As a result, the parent elements (.cropper and then #cropperParent) becomes the same size as the stretcher.

It's not what you expected. Isn't it?

But it's the correct behavior according to the standards, because the default value of min-height is auto. It means that flex item cannot be smaller than the size of its content along the main axis. You can read about it here.

Therefore, just set min-height: 0 for #cropperParent. In this case stretcher won't be able to make the cropper more than the free space, and that's what you want to get. There is the example.

Also, by the way, it's not recommended to use identifiers for styling elements. They are not intended for it.

Norserium commented 2 years ago

@Daedren, any news?

Daedren commented 2 years ago

Apologies for the delay, but yes, that solved it. Thank you for the quick replies, I've learned quite a few things today.

Norserium commented 2 years ago

@Daedren, it's all right. You are welcome!