plotly / dash-table-experiments

NO LONGER SUPPORTED - use https://github.com/plotly/dash-table instead
MIT License
174 stars 57 forks source link

Automatic width incorrectly includes parent's padding #9

Open nirvana-msu opened 6 years ago

nirvana-msu commented 6 years ago

I'm not sure exactly what the root cause of this issue is, but the table width is not calculated correctly when parent container has some padding. This becomes obvious when e.g. you've got two tables side-by-side in a Twitter Bootstrap grid systems. Each column there has padding by default, so if the table is placed as a direct child of a column, its width does not respect the padding. As a result it's not even possible to drag the мукешсфд slider on the left table because that are belongs to the right column, not left.

return html.Div([
    html.Div([
        html.Div([
            table_left,
        ], className='col-md-6'),
        html.Div([
            table_right,
        ], className='col-md-6'),
    ], className='row'),
], className='container-fluid')

I can force it to work correctly by wrapping all tables with dummy div elements (thus making them unaware of the padding that parent div has):

return html.Div([
    html.Div([
        html.Div([
            html.Div(table_left),
        ], className='col-md-6'),
        html.Div([
            html.Div(table_right),
        ], className='col-md-6'),
    ], className='row'),
], className='container-fluid')