Layout issue when using bootstrap and fixed columns

Dash Python
1

Hello,

I set fixed_columns in a dash_table.DataTable and I obtain a strange layout for the table as you can see on the picture below:

16
162342Ă—1260 178 KB

Actually, I identified that the error comes from the bootstrap style sheets. Hereafter is a minimal (I hope) example that reproduce the error. Add or remove the bootstrap css to try and do not forget to delete the browser cache.

Dash versions:

dash==1.0.0
dash-bootstrap-components==0.6.3
dash-core-components==1.0.0
dash-html-components==1.0.0
dash-renderer==1.0.0
dash-table==4.0.0

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_bootstrap_components as dbc
import dash_html_components as html
import dash_table

# other libs
import pandas as pd
import numpy as np

DEFAULT_COLORS = ['#1f77b4',  # muted blue
                  '#ff7f0e',  # safety orange
                  '#2ca02c',  # cooked asparagus green
                  '#d62728',  # brick red
                  '#9467bd',  # muted purple
                  '#8c564b',  # chestnut brown
                  '#e377c2',  # raspberry yogurt pink
                  '#7f7f7f',  # middle gray
                  '#bcbd22',  # curry yellow-green
                  '#17becf'  # blue-teal
                  ]

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

df = pd.DataFrame(np.random.random(size=(40, 10)), columns=[c for c in "ABCDEFGHIJ"])

app.layout = html.Div(className="container", children=[
    html.H4("Statistical datas"),
    dash_table.DataTable(
        id="stats-table",
        editable=False,
        # style_cell={'padding': '5px'},
        style_header={'backgroundColor': 'rgba(60, 90, 162, .25)', 
                      'fontWeight': 'bold', "border": "1px solid gray"},
        style_table={'overflowX': 'scroll'},
        style_data={'border': '1px solid gray'},
        fixed_columns={'headers': True, 'data': 1},
    ),
    dcc.Dropdown(
        id='dropdown_element_stats',
        options=[{'label': i, 'value': i} for i in df.columns],
        multi=True,
        value="",
        placeholder="Select an element"
    )
])  

@app.callback([Output('stats-table', 'data'),
               Output("stats-table", "columns"),
               Output("stats-table", "style_data_conditional")],
              [Input('dropdown_element_stats', 'value')]
              )
def display_statistics_table(values):
    """
    Display a table with statistics descriptors for each elements. The 
    background of each columns is colored accordingly to the plot.
    """
    ddf = df.describe()
    ncolors = len(DEFAULT_COLORS)
    style_data_conditional=[
        {'if': {'row_index': 'odd'},
         'backgroundColor': 'rgba(60, 90, 162, .05)'},
    ]
    style_data_conditional += [{"if": {"column_id": val},
                                "backgroundColor": DEFAULT_COLORS[i % ncolors],
                                "color": "white"}
                                for i, val in enumerate(values)]

    ddf = ddf.apply(lambda col: col.apply(lambda x: "%12.6f" % x))
    ddf.insert(0, 'Descriptors', ddf.index)
    data = ddf.to_dict("records")
    columns = [{"name": i, "id": i} for i in ddf.columns]

    return data, columns, style_data_conditional

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

Is there a way to obtain the right behavior of the table keeping bootstrap ?

EDIT If you try with only dbc.themes.GRID as bootstrap css you get the same problem. Thus the incompatibility comes from the bootstrap.min.css.

Thanks

2

Hey @gvallverdu

Looks like the problem is that DataTable uses a CSS class called row for styling the table, which clashes with Bootstrap’s row class. Specifically I think the problem is that Bootstrap’s row class sets flex-wrap: wrap.

I tried your example and managed to fix the odd layout by adding the following CSS to my assets folder. Let me know if it works for you.

.dash-spreadsheet .row {
  flex-wrap: nowrap;
}
2 Likes
3

Hello
Thanks it works fine for me !

4

Wish i’d found this before! Spent hours to figure out the same thing :sweat_smile:

1 Like
5

can you please explain how to add it to the assets folder? for one who does not have any experience with javascript?

1 Like
6

That’s actually a dash thing rather than JavaScript. Check out the docs here

7

@itamargo, I too had no idea how that worked. After a little trial and error:

I created a folder in the same directory as the dash app.py called “assets”.

Inside that folder I made a file .css

Paste that snippet into the file as is. Nothing else needed.

Dash finds that css and uses it over the top of any bootstrap styles you might pull in.

HOWEVER… My glitch with the row class was that the bootstrap css “row” class was adding a -15px margin on the left and the right. Cutting off some of my row. So, I adjusted like this.

.dash-spreadsheet .row {
  margin-left: 0px;
  margin-right: 0px;
  }

I’m a ultra novice to css an JS. So, I have no idea if that might break something else, but it’s has fixed my table issue and the rest of the site is working for me.

8

Cheers Tom, I’m not surprised that I still end up going to you to fix my Dash problems. Even if it is a little less direct these days!

1 Like