Hi, I am integrating Uppy in my Angular application. I want to use the dashboard UI with a fixed height. Here is how I am setting up the Uppy Dashboard:
@ViewChild('uppyDashboard', { static: false }) uppyDashboard: ElementRef;
this.uppy.use(Dashboard, {
inline: true,
target: this.uppyDashboard.nativeElement,
height: 300,
width: '100%',
showProgressDetails: true,
autoOpen: 'imageEditor'
});
this.uppy.use(ImageEditor, {
cropperOptions: {
aspectRatio: 1,
viewMode: 1,
autoCropArea: 1
},
actions: {
revert: false,
rotate: false,
granularRotate: false,
flip: false,
zoomIn: false,
zoomOut: false,
cropSquare: false,
cropWidescreen: false,
cropWidescreenVertical: false
}
});
When the image editor opens, the cropper canvas does not scale correctly. It always set the width of the image to 100% fill the available space in the Uppy dashboard UI. As a result some of the image overflows to the bottom of the dashboard UI. Since the overflow is hidden, the user cannot see the bottom of the image while cropping.
Is there a way to make the image always fully visible inside the fixed-height Uppy Dashboard? Or some setting I can apply to ensure the cropper canvas respects the height constraint and scales accordingly?