How to make it responsible

[theprobugmaker]

I'm planning in using the cropper on a modal, the problem I'm having is that even tho the width is being respected of the modal, the height isn't. If the user selects an image bigger than the height of the browser it will grow vertically and eventually disappears.

How can I make so the cropper respects the width and height like keeping its aspect ratio based on the width of the modal?

It's more or less like this example: https://norserium.github.io/vue-advanced-cropper/tutorials/recipes.html#upload-image

If you select a REALLY big height image it won't get bigger, it will scale to fit the area.

An image for example: https://picsum.photos/id/96/800/2000

[Norserium]

Hello, @zefexdeveloper! Did you try to set max height for the cropper or its wrapper?

[theprobugmaker]

@Norserium Yes, after inspecting your example I saw that you set the max-height as 500. The thing is that I want to put that in a modal and I don't know if setting a fixed max-height would be essencial for responsiveness, like with smaller devices. I'm a backend developer so I find it really complicated when it comes to front-end and make things responsive haha.

[Norserium]

What's the library do you use for modal window? I suppose you can set for example max-height: calc(100vh - 40px) for it and the cropper should respect it.

[theprobugmaker]

I'm using tailwindcss and yes, for things like this I can always use inline style, I won't be using this in another place, otherwise I would create a reusable class. I will be trying that out.

[Norserium]

Hello, @zefexdeveloper! Did you solve your problem?

[theprobugmaker]

Yes, kinda, I dropped the modal, it was giving me headaches, I went by switching components and showing the cropping when the user selects the image instead.

[Norserium]

Was my advice not helpful?

[theprobugmaker]

I'm sorry the delay answering. Yes it did help, thank you very much.

[theprobugmaker]

@Norserium

I went back to this issue cause I'm trying to set max height as you did you on your upload example:

I tried to do the same thing but it doesn't work, it's not respecting the max height:

    <div class="relative">
        <div class="relative">
            <div class="border border-gray-200 min-h-300px max-h-500px">
                <cropper ref="cropper" :src="image" @ready="loading = false"></cropper>
            </div>
        </div>

        <div class="flex justify-center mt-10">
            <button class="ml-2 btn btn-gold" @click.prevent="crop">Crop</button>
        </div>
    </div>

The classes are from Tailwindcss utility classes. (it doesn't work even if I set using style - meaning it's not a Tailwind problem).

[Norserium]

It's strange. Could you try to set max-height for the cropper itself, not its wrapper?

[theprobugmaker]

You are right, it's working now. Thank you.

One thing left tho. I have a spinner that I set using the ready event that the cropper returns when it's done loading, the problem is that the controls are there anyway

This cursor shows, meaning that the controls appears even when loading.

How can I only show the cropper itself or the controls when it's literally ready?

I tried adding v-show="! loading" (loading is set as false when the cropper fires ready) but it doesn't work.

[Norserium]

Are you talking about the mouse cursor upon invisible controls? If so, it's the bug obliviously, I will fix it later.

[theprobugmaker]

@Norserium Yes, the controls like for resizing is appearing even when the cropper is loading (the ready is not fired) so when I show like a spinner if the user mouse hover the cropper space he can see the cursor changing to the resize one as the controls are there already before the image is loaded.

[Norserium]

@zefexdeveloper, this bug is fixed in 0.15.2

[theprobugmaker]

@Norserium You rock, thank you for that.