Width argument in style dictionary does not change size properly for input component

Dash Python
1

Width argument in style dictionary is not really changing the size of dcc.Input component. When I change width from 0.05% to 5%, it only changes size of spaces from other components. 5% width:

Screenshot%20from%202019-06-20%2014-44-03
Screenshot%20from%202019-06-20%2014-44-03757×64 1.63 KB
0.05% width:
Screenshot%20from%202019-06-20%2014-44-17
Screenshot%20from%202019-06-20%2014-44-17755×68 1.63 KB
.

How can I make size of the input component same as the other dropdown components, where each takes up, say, 5% of the row?

My code:

app.layout = html.Div([

    # header
    html.Div([
            html.H1('VaR Calculator',
                    style={'textAlign': 'center'}),
            html.Br(),
            html.P("""This application calculates VaR for given portfolio.""")], 
            style={'padding':10, 'fontSize':20}),

    html.Div([
    
        html.Div([
            dcc.Input(
                    id = 'size',
                    type='text',
                    value='',
                    
            )],style={'width':'0.05%', 'display':'table-cell','padding':5, 'verticalAlign':'middle'}
            ),
        

        html.Div([
              dcc.Dropdown(
                      id='prod',
                      options=[{'label':p,'value':p} for p in products],
                      value=None,
                      clearable=False,
                      )],
              style={'width':'6%', 'display':'table-cell', 'padding':5, 'verticalAlign':'middle'}),
        
        html.Div([
              dcc.Dropdown(
                      id='exp',
                      options=[{'label':e,'value':e} for e in exp],
                      value=None,
                      clearable=False,
                      )],
              style={'width':'6%', 'display':'table-cell','padding':5, 'verticalAlign':'middle'}),
              
              
        html.Div([
              dcc.Dropdown(
                      id='delta',
                      options=[{'label':d,'value':d} for d in types],
                      value=None,
                      clearable=False,
                      )],
              style={'width':'6%', 'display':'table-cell', 'padding':5, 'verticalAlign':'middle'}),
              
        html.Div([
              dcc.Dropdown(
                      id='method',
                      options=[{'label':m,'value':m} for m in methods],
                      value=None,
                      clearable=False,
                      )],
              style={'width':'6%', 'display':'table-cell', 'padding':5, 'verticalAlign':'middle'})
        
        ], style={'verticalAlign':'middle', 'width': '30%', 'display':'table'})

])

2

To me either, after the update dash, style = {‘width’: 'xx% '} in dash datatable don’t work.

Any solution??

3

Hey! I’m also trying to figure this out…for the the Input as well as the Slider components.

4

@jperez Hi - where are you putting the style property, because the DataTable (v4.0.0) does not have a style argument:

TypeError: Unexpected keyword argument `style`
Allowed arguments: active_cell, columns, css, data, data_previous, data_timestamp, derived_filter_query_structure, derived_viewport_data, derived_viewport_indices, derived_viewport_row_ids, derived_viewport_selected_row_ids, derived_viewport_selected_rows, derived_virtual_data, derived_virtual_indices, derived_virtual_row_ids, derived_virtual_selected_row_ids, derived_virtual_selected_rows, dropdown, dropdown_conditional, dropdown_data, editable, end_cell, filter_action, filter_query, fixed_columns, fixed_rows, id, is_focused, locale_format, merge_duplicate_headers, page_action, page_current, page_size, row_deletable, row_selectable, selected_cells, selected_row_ids, selected_rows, sort_action, sort_as_null, sort_by, sort_mode, start_cell, style_as_list_view, style_cell, style_cell_conditional, style_data, style_data_conditional, style_filter, style_filter_conditional, style_header, style_header_conditional, style_table, tooltip, tooltip_conditional, tooltip_data, tooltip_delay, tooltip_duration, virtualization

It does have multiple style options for the individual sections (e.g. style_cell, style_data, style_filter, style_header, style_table). Technically, style_table should probably be where you want to define the width property.

5

@c_f Hi and thanks for reply. I put style in html.Div not in dash datatable becouse how you said does not have a style argument.

my code:

html.Div(
    dash_table.DataTable(
        id="data",
        data=data.to_dict('rows'),
        columns=[{'id': c, 'name': c} for c in data.columns],
        style_as_list_view=True,
        style_table={'margin': 5,'width' : '100%'},
        style_header={'backgroundColor': "rgb(3,35,245)", 'color': 'white'},
        style_cell={'textAlign': 'center', 'font-size': '22px','font-family': "Calibri",'minWidth' : 100},

    ),style={'width' : '89%', 'marginLeft': 130 , 'marginTop' : 140 ,'minWidth' : 1000  },
),

Previous versions this worked, but since last week’s update, don’t work fine.

6

Hello again, I agree that something changed with how the width of the DataTable is handled. We have actually seen the same behaviour in the latest release (v4.0.0). I added 'width': '100%' to the style_header argument, which fixed the width issues. I was expecting it to work in style_table, but for some reason that didn’t work.

Anyway this should work for your case:

html.Div(
    dash_table.DataTable(
        id="data",
        data=data.to_dict('rows'),
        columns=[{'id': c, 'name': c} for c in data.columns],
        style_as_list_view=True,
        style_table={'margin': 5},
        style_header={'width' : '100%', 'backgroundColor': "rgb(3,35,245)", 'color': 'white'},
        style_cell={'textAlign': 'center', 'font-size': '22px','font-family': "Calibri",'minWidth' : 100},

    ),style={'width' : '89%', 'marginLeft': 130 , 'marginTop' : 140 ,'minWidth' : 1000  },
),
7

@bwbonnie are you sure you want the inputs to be taking 5% of the row or do you maybe want 1/5th of the row (which would be width: 20%)?

8

Thanks @c_f, style_header={‘width’ : ‘100%’} worked for me.

9

The 5% is set by trial and error. Actually, 0.05% works best in the case somehow. Changing 5% to 20% or to 0.05% will only change the spacing between the components, rather than their size.

10

I think your issue is related to setting the width in the surrounding Div component, rather than setting it as part of the actual dcc.Input / dcc.Dropdown components.

A width of 0.05% is invisible on a regular page. Assuming the page is rendered on a screen measuring 100cm, your 0.05% of that width is only 0.05cm (or 0.5 mm) - that. is not something you can typically see.

So instead of:

html.Div([
            dcc.Input(
                    id = 'size',
                    type='text',
                    value='',
                    
            )],style={'width':'0.05%', 'display':'table-cell','padding':5, 'verticalAlign':'middle'}
            )

Try:

html.Div([
            dcc.Input(
                    id = 'size',
                    type='text',
                    value='',
                    style={'width':'20%'}
            )],style={'display':'table-cell','padding':5, 'verticalAlign':'middle'}
            )
11

thanks. but I’ve already tried that. width is just not working the same for input as it works for dropdowns.

12

Looks something like this.

Screenshot%20from%202019-06-25%2008-42-24
Screenshot from 2019-06-25 08-42-24.png1794×70 2.67 KB

13

@bwbonnie I have the same problem, I think it’s because the size component of dcc.Input, which defines the initial number of characters in the input, has priority over the width attribute in the style. Try

dcc.Input(
     id = 'size',
     type='text',
     value='',
     size='30'
)

Not a very good solution but I couldn’t find any other…

1 Like
14

I hope this helps:

Using style={‘overflow’:‘auto’} allowed my dcc.Input components to resize properly when used inside of an html grid layout.

my_input = dcc.Input(style={'overflow':'auto'})
1 Like
16

Doesn’t work.

for me this did:

dcc.Input(style={'width':'100%'})

17

I verified type, size, and width one by one that I needed both size and width:

dcc.Input(id= {'sub_ses-1':f'{sub}_{ses}'},
    placeholder='comment',debounce=True,
    style={'width':'100%'}, size='200')
1 Like