outline css

[topninja]

When upload one file on dropdown. then shows outline below

I checked the css :

.MuiGrid-spacing-xs-8{
width : calc(100% + 64px)
}

I wanna remove this css or remove black outline
so all ourline should fit the dropdownzone's zone.
how to do this?
need urgent help :>

[mattcorner]

Related: Would also like to override this :focus border colour but can't seem to work out how. Including in dropzoneClass doesnt work.

Not getting this css partial draw error though, my border is complete.

[topninja]

Thanks Mattcorner.

go to this url
https://yuvaleros.github.io/material-ui-dropzone/
and on basic usage of dropzonearea, upload any image then shows above screen
I hope only remove black focus outline that colored by yellow

[mattcorner]

Can replicate as suggested above. I'll split my issue into a separate thread.

[panz3r]

Hi @topninja ,

Thanks for your feedback and the clear explanation.
Whilst I can't replicate the issue myself (I don't see the black border but see the :focus outline) it seems related to how the Material-UI Grid component works and how we integrated it for the Preview section.

We'll look into this as soon as possible.

[max-carroll]

I also get this issue, this is on chrome on a windows machine

I hack-fixed this for myself by passing in a container spacing of 0 to previewGridProps

previewGridProps={{
            container: { spacing: 0}
          }}

the default spacing is 8 which I think is a bit much, I have noticed that high numbers on the mui spacing seem to have bizarre results when there's not much space

[topninja]

thanks for your help.

[max-carroll]

I don't believe this to be resolved, whilst there is a hacky solution of passing in props to override the spacing, I don't think we truly can mark this as resolved until this never happens by default. Could you please reopen this topninja?

[max-carroll]

Thanks topninja

[max-carroll]

this negative margin is caused by the spacing={8} prop as illustrate bellow (1), this is overriden by topninja by passing in a spacing of 0 into the container (2)

According to this article here https://blog.logrocket.com/the-material-ui-grid-system/ on the mui grid system a negative margin problem can be fixed in a few ways

1. Not using the spacing feature and implementing it in userspace spacing={0} (default)
2. Applying padding to the parent with at least half the spacing value applied to the child
3. Adding overflow-x: hidden; to the parent

Here's another few suggestions that I've thought of

4. Another alternative is not using the spacing feature here and giving a margin to each Preview Tile so that they space themselves,

5. Defaulting the spacing to 0 and allowing people to pass it in if they want, it seems a bit wacky to default to something which is going to create a 32 pixel negative margin.

[max-carroll]

I'm tending towards the overflow soloution, this was a oneline code change and if we do decide to change the spacing of the items perhaps this is a seperate issue such as "the spacing is too large". The overflow issue fixed the problem it appears to behaving exactly as before but with the rubber band not misshapen, I will just make sure it works the same for more files when the files go onto a second row

[max-carroll]

The overflow doesn't prevent the dropzone growing vertically when lots of files are added. So with the overflow hidden set on the dropzone

here is a before and after image

Before

After

[max-carroll]

I have created a PR #156 that fixes this

[max-carroll]

I have made a PR for the backport which is here PR #157

[topninja]

great max-carroll
can you tell me your email?

[max-carroll]

great max-carroll
can you tell me your email?

I have emailed you from my personal email address 😄

[shasu01]

I am having the issue with the scroll. how do I fix it?

[max-carroll]

Is that as a result of the new overflow: hidden proprerty on the dropzone? can you send a screenshot?

If this issue is a result of the overflow hidden property can you confirm this by switching it off to double check?

If there is any problem with the overflow hidden solution then we will have to reopen this issue and fix it, However if its something else that will be a separate issue so please provide a bit more information.

If there is a problem with the overflow hidden then you can temporarily fix this yourself with a workaround by providing a dropzoneClass prop with overflow: 'visible' until we are able to rectify it

const styles = ... {
   customClass: {
    overflow: 'visible'
   }
}

const classes = useStyles() // if your using hooks, otherwise this 'll come from the props, or maybe your using some different method for css

<DropzoneArea
   dropzoneClass={classes.customClass}
   ...
/>

[shasu01]

this is what I get, I added in your change as
const styles = {
customClass: {
overflow: 'visible'
}
}
const classes = useStyles();

<DropzoneArea
dropzoneClass={classes.customClass}
acceptedFiles={['image/*', 'application/pdf']}
filesLimit={1}
maxFileSize={100000}
dropzoneText='Drag and drop an image file here or click'
onChange={this.handleChange.bind(this)}
showPreviewsInDropzone={true}
fullWidth={false}
maxWidth={'sm'}
showAlerts={true}
/>

[max-carroll]

send me a screenshot before you changed any css please to show me what the original problem was

[shasu01]

I need to get rid of the scrollbars. I added in a
<div style={{width:'90%', height:'90%'}}>
but the vertical scroll remains and the above issue comes in

[max-carroll]

there shouldnt be any scroll bars, is this screenshot you just sent before any of your fixes? including the <<div style={{width:'90%', height:'90%'}}>

[max-carroll]

I want to help you, but I also want to diagnose if there's any problem with this fix, and to determine if this issue needs to be reopened, a new one created, or whether there's anything strange about your code that's causing the issue. If you provide enough details as to whats going on in your situation I will help you

[shasu01]

yes the last screenshot is before any changes.
this is original code
<DropzoneArea
acceptedFiles={['image/*', 'application/pdf']}
filesLimit={1}
maxFileSize={100000}
dropzoneText='Drag and drop an image file here or click'
onChange={this.handleChange.bind(this)}
showPreviewsInDropzone={true}
fullWidth={false}
maxWidth={'sm'}
showAlerts={true}
/>

my email address is [email protected]

[max-carroll]

I would try the following things

• Look at the containing div is there anything stange? like a max width or something
• try deleting maxWidth prop

If these 2 fail then maybe there is something wrong with this solution could you confirm by seeing if you get the same result on the example page, so we can eliminate the surrounding code as the issue

• I implemented the overflow: hidden as a soloution to this but there are other soloutions so if you think thats whats having a negative impact as a temprary workaround you can

1. set the overflow back to hidden (that will fix your scrolling issue) but you will now have the rubber band with a funny shape issue
2. you can use a work around fix for this by passing in a spacing: 0 prop into the previewList props like this

    <DropzoneArea
    ...
    previewGridProps={{
                container: { spacing: 0}
              }}
    ...
   />

However if you do this then the preview tiles won't have the spacing that they did before

[shasu01]

Its working!!! Thank you

<DropzoneArea
acceptedFiles={['image/*', 'application/pdf']}
filesLimit={1}
maxFileSize={100000}
dropzoneText='Drag and drop an image file here or click'
onChange={this.handleChange.bind(this)}
showPreviewsInDropzone={true}
fullWidth={false}
previewGridProps={{
container: { spacing: 0}
}}
showAlerts={true}
/>

[max-carroll]

If you think there is an issue with the material-ui-dropzone and would like us to fix it then we need to be able to reproduce the exact same problem you had, the solution is just a hack as opposed to actually really fixing the underlying problem,

for instance it may be the container that your is in thats the problem, we just don't know with the info you provided

[Diaver]

The same issue for DropzoneDialog:

It is fixed by:

Maybe make sense apply some permanent fix for that?