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([
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'),
])
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 .
Thanks for the article reference. I’ll check it out. I’ll mark your initial response as the solution.