How to force all component in one row?

Dash Python
1

Hi

I like to put all the below 4 components in one row, so I used dbc.Row() with nested dbc.Col() with width defined. The final result look very ugly. I remember the total width must be 12, is it correct? why it does’t work for this code? Could you please give me some idea? Thanks

            html.Div(
                [
                dbc.Row(
                    [
                    dbc.Col(dbc.Label('Depth Grouping'),width=4),
                    dbc.Col(dcc.Textarea(
                    id='depth-grouping-text',
                    value='2',   
                    style={'width': '100%', 'height': 30},
                            ),width=2
                    ),
                    dbc.Col(dbc.Label('Min Depth'),width=2.5),
                    dbc.Col(dcc.Input(id="min-well-depth-text", type="number", value=0,placeholder=0),width=3.5),
                    ],justify='center'
                )
                ]
                ),

dash

2

Hi @roudan, did you add external_stylesheets in your code? And I think width of Col should be interger, not float as 2.5 or 3.5

2 Likes
4

Hi hoatran, yes I did use externall_stylesheets. Even I used integer for width, still not solve the issue. Thanks

5

Hi, how did you change? I tried to change from 2.5 to 3 and 3.5 to 3 and it worked. As you mentioned above, all columns width should be 12.

2 Likes
6

Thanks hoatran. I just changed width of each component to be 3, so total is 12. However, yes all the component can be on one row, but too big, the last component is too wide, so overflow the edge. not sure why this dcc.Input() component doesn’t use the width of input 3. Thanks

image

7

Hi hoatran, I found an answer from this forum, the problem is due to dcc.Input() issue. Here is what I did by adding style={‘width’:‘100%’}, size=‘10’ inside dcc.Input() and it works. Thank you so much for your help. I appreicate it. Have a good day!

dbc.Col(dcc.Input(id=“dts-min-well-depth-text”, type=“number”, value=0,placeholder=0,style={‘width’:‘100%’}, size=‘10’),
width=3)

image

1 Like
8

Good to hear that you found solution :smiley:

2 Likes