Component Size - Right Side Runs off the Page

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…

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([
            'Drag and Drop or ',
            html.A('Select Files')
            'width': '85%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        # Allow multiple files to be uploaded

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.

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: .

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

1 Like