Vue-dropzone: dz-progress when autoProcessQueue: false

[mattdunndc]

Hi,

How can I remove the horizontal line (dz-progress?) when autoProcessQueue is set to False? Anyone, anyone, Bueller?

[mattdunndc]

Help! Trying to remove the white line above. Thanks!

[rowanwins]

Hi @mattdunndc

Depending on the end result desired

• the slightly trickier approach would involve passing in a custom template that removed the div entirely
• the easy approach would be to override the css by doing something like dz-progress{display:none;}

Does that help?

[mattdunndc]

thanks @rowanwins . Can't seem to get the easy approach to work (dz-progress{display:none;}) so I guess I will live with it.

[rowanwins]

Hi @mattdunndc

Do you know how to use the Chrome Dev Tools to check what css is being applied? If not I suggest taking a look at this tutorial

[mattdunndc]

Thanks @rowanwins . I changed the opacity to .5 in Dev Tools and that's what I want. I tried to add this to my site.css but it's not taking. I must be doing something wrong.

.dropzone .dz-preview .dz-progress {
opacity: .50;
}

[mattdunndc]

why is this getting crossed out?

[rowanwins]

So what is likely happening is that the dropzone css is being injected after your component css and so it is overriding your component css.

That being the case you should use the id of the dropzone component that you're setting because it is a more specific css selector
````

myDropzone .dz-preview .dz-progress {

opacity: .50;

}
// Replace the #myDropzone with whatever you are setting as the id
````
Hope that helps

[mattdunndc]

@rowanwins Rowan! Thanks for your help on this. It worked wonderfully and I learned a few things. Really appreciate all your contributions to the community.

[rowanwins]

Learning chrome dev tools is in my top 3 things for ppl new to web development to learn, will save you a lot of time and heartache if can learn quick and efficient debugging

[vrajroham]

@mattdunndc I agree! I too learnt about specific css selector, same issue wasted my lot of time earlier.

Thanks @rowanwins 🎉

[AshwinIcfGithub]

@rowanwins Can I hide progress bar dynamically? I'm try to hide it after upload is done. I'm trying custom template to render preview.