Unable to Change CSS Stylings of a Class

Question

I have been having this trouble for quite a while. I am unable to target the CSS styling class for the thumbnail preview of vue2-dropzone (vue2dropzone seems to share many similar properties with dropzone.js based on the documentation). Whenever I am uploading an image this CSS class appears in my dropzone HTML tags.

I see that I need to override a default value placed in the CSS which is min-height: 100px or else I will end up with a result such as shown below that displays a white box protruding from the image.

This is my code in my vue file as it relates to its id and ref:

    <vue2Dropzone 
    ref="vue2dropzone" 
    id="dropzone" 
    class="vue-dropzone"
    :options="dropzoneOptions"
    @vdropzone-s3-upload-error="s3UploadError"
    @vdropzone-s3-upload-success="s3UploadSuccess"
    ></vue2Dropzone>

I tried many things but it doesn't seem to be working, even something simple such as

.dropzone .dz-preview {
   min-height: 10px;
}

as well as even adding an !important but it didn't seem to have worked.

I have tried targetting it while being specific with my CSS:

#dropzone .dz-preview .dz-image-preview .dz-processing{
  min-height: 10px !important;
}

When I tried this it seems as though whatever change I made always resulted in no CSS styling being changed/affected. I went as far as to just try adding some effect on the image to change the CSS but still unable to see any effect taking place.

#dropzone .dropzone .dz-preview .dz-image img{
  min-height: 10px;
  border: 20px solid red;
}

Does anyone know anything else i can try to change the thumbnail preview size? I have tried changing the thumbnailWidth and thumbnailHeight` in dropzone options but it wouldn't get rid of the white protruding box below the actual image.

Could you make a codesandbox with your issue? Also, have you tried custom sytling with the `:include-styling="false"` prop? https://rowanwins.github.io/vue-dropzone/docs/dist/#/custom-preview — Zed Home, Jun 11 '20 at 09:21
It's generally poor usage, but have you tried using `!important` in an inline styling? — nbixler, Jun 22 '20 at 21:48

score 1 · Answer 1 · answered Apr 24 '21 at 12:15

Vue2dropzone won't apply any custom CSS, unless the Dropzone element has the :include-styling="false" prop, like @Zed Home's comment says. If you have this prop, then all your styling will be applied.

The only problem with this, is that you will lose all of the default Dropzone styling, which is quite a lot, so you will have to write additional CSS to cover for the (now missing) default styling. I hope this makes sense. Try adding the prop and see what happens.

Example:

<vue2Dropzone 
    ref="vue2dropzone" id="dropzone" class="vue-dropzone"
    :options="dropzoneOptions"
    :include-styling="false"
    @vdropzone-s3-upload-error="s3UploadError"
    @vdropzone-s3-upload-success="s3UploadSuccess"
></vue2Dropzone>

Read more about it in the docs: https://rowanwins.github.io/vue-dropzone/docs/dist/#/custom-preview

Unable to Change CSS Stylings of a Class

1 Answers1