Left Padding for dcc.Upload Component

Dash Python
1

I’m building a web application using Dash. I want to give the user the ability to upload a file using the dcc.Upload component.

My code for that piece is as follows:

    html.Div([
        dcc.Upload(
            id='upload-data',
            children=html.Div([
                'Drag and Drop or ',
                html.A('Select Files')
            ]),
            style={
            'margin-left' : '300px',
            'width' : '50%',
            'height' : '60px',
            'lineHeight' : '60px',
            'borderWidth' : '1px',
            'borderStyle' : 'dashed',
            'borderRadius' : '5px',
            'textAlign' : 'center',
            'margin' : '10px'
            },
            multiple=True
            ),
        html.Div(id='output-data-upload'),
        ]),

I’m trying to give some left padding on the upload icon, but 'margin-left' : '300px' seems to have no effect.
I also tried marginLeft, which doesn’t work either.

What is the correct way to give left padding on the Upload component?

Thanks in advance!

2

It turns out that 'margin' : '10px' was overwriting 'margin-left' : '300px'.

The correct syntax is either:

'margin' : '10px 10px 50px 300px'

or

            'marginTop' : '10px',
            'marginRight' : '10px',
            'marginBottom' : '50px',
            'marginLeft' : '300px',