I've been struggling with a CSS styling issue for some time now. The problem lies in targeting the class for the thumbnail preview of vue2-dropzone (which shares similar properties with dropzone.js based on documentation). Each time I upload an image, this CSS class shows up in my dropzone HTML tags.
https://i.sstatic.net/h9tsI.png
The default value in the CSS that needs to be overridden is min-height: 100px, as failing to do so results in a white box extending from the image like in the example below:
https://i.sstatic.net/OrFys.png
In my vue file, the relevant sections pertaining to id and ref are as follows:
<vue2Dropzone
ref="vue2dropzone"
id="dropzone"
class="vue-dropzone"
:options="dropzoneOptions"
@vdropzone-s3-upload-error="s3UploadError"
@vdropzone-s3-upload-success="s3UploadSuccess"
></vue2Dropzone>
Despite trying various methods, such as the following simple alteration:
.dropzone .dz-preview {
min-height: 10px;
}
And even adding !important, no changes were visible. I attempted to target it specifically using CSS:
#dropzone .dz-preview .dz-image-preview .dz-processing{
min-height: 10px !important;
}
No matter what change I made, the CSS styling remained unaffected. Even trying to add effects to the image did not show any impact:
#dropzone .dropzone .dz-preview .dz-image img{
min-height: 10px;
border: 20px solid red;
}
If anyone has suggestions on how to adjust the size of the thumbnail preview, please share. Modifying the thumbnailWidth and thumbnailHeight in dropzone options did not remove the white protruding box beneath the image.