Plotly Dash：dcc.Upload 组件的左填充

Posted 2023-02-18

【中文标题】Plotly Dash：dcc.Upload 组件的左填充

【英文标题】：Plotly Dash: Left padding for dcc.Upload component

【发布时间】：2020-09-30 15:03:00

【问题描述】：

我正在使用 Dash 构建一个 Web 应用程序。我想让用户能够使用dcc.Upload 组件上传文件。

我的代码如下：

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'),
    ]),

我正在尝试在显示“拖放或选择文件”的框上添加一些左侧填充。

在style 字典中，'margin-left' : '300px' 似乎没有任何作用。

我也试过marginLeft，也不管用。

在dcc.Upload 组件上提供左填充的正确方法是什么？

【参考方案1】：

您的代码的问题是'margin-left': '300px' 被'margin': '10px' 覆盖，这就是您看不到任何效果的原因。请注意，您可以一次指定所有边距。例如，设置'margin': '10px 5px 3px 300px' 将添加一个 10px 的上边距、一个 5px 的右边距、一个 3px 的下边距和一个 300px 的左边距。