Component Size - Right Side Runs off the Page

Dash Python
1

I have an issue where my custom component overruns on the right. I moved on to something else and noticed the same behavior in the Dash documentation (see attached image). Notice how the dotted line around the drag-and-drop overruns on the right? I know I can just set the size, but seems like there should be a dynamic way to do it…

image
image1135×1044 70.6 KB

2

Hi @knot-a-dev
I’m not sure about your custom component, but using the dcc.Upload example, you can reduce the width from 100% to anything less than that (e.g. 85%).

app.layout = html.Div([
    dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '85%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        # Allow multiple files to be uploaded
        multiple=True
    ),
    html.Div(id='output-data-upload'),
])
3

Thanks, @adamschroeder. I can see that your suggestion works. Probing a little deeper - why does one have to set the width of the component to a size that is less than its container size to achieve elasticity? is that a general html-type thing or is this specific to Dash? I confess I’m fairly new to this game so, I’m trying to better understand how these pieces fit and work together.

4

That’s a great question, @knot-a-dev . This article on layouts helped me understand this topic a lot better, and it could probably answer your question a lot better than I could :slight_smile: .

5

Thanks for the article reference. I’ll check it out. I’ll mark your initial response as the solution.

1 Like