dcc.Upload component always max width?

Dash Python
1

Is there anyway to reduce the width of a dcc.Upload component so you can have multiple components at the same height position/row. Editing the style width reduces what the component looks like but it still doesn’t allow any other components on the same row, its the same when using dash bootstrap rows and columns. Does anyone know a way around this?

app.layout = html.Div(
    [
        dbc.Row([
            dbc.Col([
                dcc.Upload(
                    id='upload-data',
                    children= [html.Button('Upload SGR File')],

                    # style={
                        # 'height': '60px',
                        # 'lineHeight': '60px',
                        # 'borderWidth': '1px',
                        # 'borderStyle': 'dashed',
                        # 'borderRadius': '5px',
                        # 'textAlign': 'center',
                        # 'margin': '10px'
                    # },
                    # Allow multiple files to be uploaded
                    multiple=True,
                ),
                ],
                width={"size":6}
            ),
            dbc.Col([
                dcc.Upload(
                    id='upload-sites',
                    children= [html.Button('Upload Site File')]
                    # style={
                        # 'height': '60px',
                        # 'lineHeight': '60px',
                        # 'borderWidth': '1px',
                        # 'borderStyle': 'dashed',
                        # 'borderRadius': '5px',
                        # 'textAlign': 'center',
                        # 'margin': '10px'
                    # },
                ),
                
            ],width={"size":6}
            ),
        ]),
        
        dbc.Row(
            dbc.Col( 
                dcc.Graph(id="graph"),
            )
        )
            
])

dash upload component
dash upload component1280×574 19.8 KB

2

Hello Plotly Community,

I am also facing the same issue where I am trying to align two buttons ,one for download and another for upload in a single row. The upload is taking the max width as 100%. Is there a workaround for this?

Thanks,
Priya

3

Hi @Priya welcome to the forums.

You can do this many different ways, here an example using dash-bootstrap-components and dcc

import dash
from dash import html
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

button_row1 = dbc.Row(
    [
        dbc.Col(
            dbc.Button(
                "BTN1",
                style={'width': '100%'},
                className='border-dark border-2',
            ),
            width=6
        ),
        dbc.Col(
            dbc.Button(
                "BTN2",
                style={'width': '100%'},
                className='border-dark border-2',
            ),
            width=6
        )
    ]
)

button_row2 = html.Div(
    [
        html.Div(
            html.Button(
                "BTN3",
                style={'width': '100%'},
            ),
            style={'width': '50%'}
        ),
        html.Div(
            html.Button(
                "BTN4",
                style={'width': '100%'},
            ),
            style={'width': '50%'}
        )
    ],
    className='hstack'
)

app.layout = html.Div([
    button_row1,
    button_row2,

])

if __name__ == '__main__':
    app.run(debug=True)

Bild1
Bild1739×647 17.8 KB

1 Like