Dash DataTable not showing the correct column width

Dash Python
1

Hello,

I am trying to use a Checklist tool to control show/hide a DataTable as input field. In the default layout, I set the style={'display': 'none'} for the input div and use a callback to change it to style={'display': 'block'}.

The issue I found is that the columns’ widths are not occupying the full page without adjusting the browser window.

screenshot
screenshot.png2266×656 53.9 KB

Here is the code:

import dash_core_components as dcc
import dash_html_components as html
import dash_table_experiments as dt
from dash.dependencies import Input, Output

import dash

app = dash.Dash()

external_css = [
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
]
for css in external_css:
    app.css.append_css({"external_url": css})

layer_name = 'Layer'
ele_name = 'Element'
iso_name = 'Isotope'
iso_ratio_name = 'Isotopic ratio'
iso_tb_rows_default = [{ele_name: None, iso_name: None, iso_ratio_name: None, layer_name: None}]

app.layout = html.Div(
    [
        dcc.Checklist(id='show',
                      options=[
                          {'label': 'Show input field', 'value': True},
                      ], values=[],
                      ),
        html.Div(
            [

                dt.DataTable(rows=iso_tb_rows_default,
                             # columns=header,
                             editable=True,
                             filterable=True,
                             sortable=True,
                             id='table'),
            ],
            id='input_div',
            style={'display': 'none'}
        ),

    ]
)


@app.callback(
    Output('input_div', 'style'),
    [
        Input('show', 'values'),
    ])
def show_hide_iso_table(show):
    if show:
        return {'display': 'block'}
    else:
        return {'display': 'none'}


if __name__ == '__main__':
    app.run_server(debug=True)

Thanks!

2

Hello,

Have you managed to fix this problem?
I have a similar bug in my app that I can’t fix.

I had problems as well with map that wouldn’t not extend to their full size until I force refresh by adding an empty div, but I don’t want to use the same solution for this as it is quite an ugly fix.

Any insight would be appreciated, thanks :slight_smile:

3

I used a workaround by changing style={'display': 'none'} to style={'visibility': 'hidden'}.

4

2 posts were split to a new topic: Scattermapbox resize issues