Double Scrollbar bug

[danielgut10]

For some reason, I am getting a double scrollbar in my dash tables (look at attached screenshot). The inner scroll bar works perfectly, as it enables me to scroll up/down through the table I plotted. But the outer scrollbar is absolutely useless, and it looks ugly. I want to remove the outer scrollbar ONLY.

I have tried everything, and pretty much searched everywhere. The only way to remove the outer scrollbar is by deleting "overflowY" key in the style_table parameter in the dash_table.Datatable() object. However, this removes the inner one too, and it makes my table super long, which makes my dash web app look bad. Does anyone know how to fix this problem?

Thanks!

Double scroll bar image:

Double scrollbar in Dash Tables
Daniel · 4 minutes ago
Hello! First of all, thank you for an excellent course. I learned a lot.

For some reason, I am getting a double scrollbar in my dash tables (look at attached screenshot). The inner scroll bar works perfectly, as it enables me to scroll up/down through the table I plotted. But the outer scrollbar is absolutely useless, and it looks ugly. I want to remove the outer scrollbar ONLY.

I have tried everything, and pretty much searched everywhere. The only way to remove the outer scrollbar is by deleting "overflowY" key in the style_table parameter in the dash_table.Datatable() object. However, this removes the inner one too, and it makes my table super long, which makes my dash web app look bad. Does anyone know how to fix this problem?

Thanks!

Here is my code for that:

html.Div([
# ----- Client Pivot Table
html.Div([
# Pivot Table Header
html.H3(id='client-pivot-table-header',
children=dcc.Markdown(children='Tabla de Clientes'),
style={'color':colors['H3'],
'fontFamily':font_dict['H3'],
'textAlign':'center',
'padding':padding_dict['betweenGraphAndTable']}),

        # Client Pivot Table
        dash_table.DataTable(id='client-pivot-table',
                             data=pvt_client_df.to_dict("rows"),
                             columns=[{"name": i, "id": i} for i in pvt_client_df.columns],
                             style_header={'backgroundColor': 'silver',
                                           'fontWeight': 'bold',
                                           'textAlign': 'center'},
                             style_table={'maxHeight': max_table_height,
                                          'overflowY': 'scroll',
                                          'maxWidth': max_table_width,
                                          'padding':padding_dict['LeftMargin']},
                             style_cell={'minWidth': '0px', # min width of col
                                         'maxWidth': '100px',# max width of col
                                         'overflow':'hidden', #if text overflows col width, hide text
                                         #'whiteSpace': 'normal', #  "wrap text"
                                         'textOverflow':'ellipsis', # if overflow, show "..."
                                         'textAlign': 'center'},

                             style_cell_conditional=[{'if':{'row_index':'odd'},
                                                       'backgroundColor': colors['TableRows']},
                                                    {'if': {'column_id': "Cliente"},
                                                      'width': '35%',
                                                      'overflow':'hidden',
                                                      'textOverflow':'ellipsis',
                                                      'textAlign':'left'},
                                                     {"if": {"column_id": "$ Cotizado"},
                                                      'textAlign': 'right'}],
                             css=[{'selector': '.dash-cell div.dash-cell-value',
                                   'rule': 'display: inline; white-space: inherit; overflow: inherit;text-overflow: inherit;'}],
                             editable=False,
                             filtering=True,
                             sorting=True,
                             sorting_type="multi",
                             row_deletable=False,
                             selected_rows=[])
              ], className = "six columns"
    ),
    
    # ----- Supplier Pivot Table
    html.Div([
        # Pivot Table Header
        html.H3(id='supplier-pivot-table-header',
                children=dcc.Markdown(children='**Tabla de Suplidores**'),
                style={'color':colors['H3'],
                       'fontFamily':font_dict['H3'],
                       'textAlign':'center',
                       'padding':padding_dict['betweenGraphAndTable']}),
              
        # Supplier Pivot Table
        dash_table.DataTable(id='supplier-pivot-table',
                               data=pvt_supplier_df.to_dict("rows"),
                               columns=[{"name": i, "id": i} for i in pvt_supplier_df.columns],
                               style_header={'backgroundColor': 'silver',
                                           'fontWeight': 'bold',
                                           'textAlign': 'center'},
                               style_table={'maxHeight': max_table_height,
                                             'overflowY': 'scroll',
                                             'maxWidth': max_table_width,
                                             'padding':padding_dict['LeftMargin']},
                               style_cell={'minWidth': '0px', # min width of col 
                                           'textAlign': 'center',
                                           'maxWidth': '100px',# max width of col
                                           'overflow':'hidden',
                                           #'whiteSpace': 'normal', # "wrap text"
                                           'textOverflow':'ellipsis' # if overflow, show "..."
                                 },

                               style_cell_conditional=[{'if':{'row_index':'odd'},
                                                       'backgroundColor': colors['TableRows']},
                                                       
                                                       {'if': {'column_id': "Suplidor"},
                                                      'width': '35%',
                                                      'overflow':'hidden',
                                                      'textOverflow':'ellipsis',
                                                      'textAlign':'left'},
                                                       {"if": {"column_id": "$ Cotizado"},
                                                        'textAlign':'right'}],
                               css=[{'selector': '.dash-cell div.dash-cell-value',
                                     'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'}],
                               editable=False,
                               filtering=True,
                               sorting=True,
                               sorting_type="multi",
                               row_deletable=False,
                               selected_rows=[])
                ], className = "six columns"
      )

], className = "row"
),

[Marc-Andre-Rivet]

Transferring this issue over to the dash-table repo.

[Marc-Andre-Rivet]

@danielgut10 Filled in some gaps to get a working example that is close to what you provided above. I've removed some styles as they were linked to variables and I don't know what those were. I suspect there was an additional CSS being applied too. Those should have no impact on the resolution.

Problem reproduction
Getting this result (on Mac with scrollbars=always in general settings, with scrollbars turned off by default, the table seems to render fine):

Resolution
By changing overflowY: scroll for auto the tables render as so (only one scrollbar) and behave as you would expect:

Implementation
app

# pylint: disable=global-statement
import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
import os
import pandas as pd
import sys

sys.path.append(
    os.path.abspath(
        os.path.join(os.path.dirname(sys.argv[0]), os.pardir, os.pardir, os.pardir)
    )
)
module_names = ["dash_table"]
modules = [__import__(module) for module in module_names]
dash_table = modules[0]

app = dash.Dash()
app.css.config.serve_locally = True
app.scripts.config.serve_locally = True

pvt_client_df = pd.read_csv('app_clients.csv')
pvt_supplier_df = pd.read_csv('app_suppliers.csv')

max_table_height = 200
max_table_width = 500

app.layout = html.Div([
    # ----- Client Pivot Table
    html.Div([
        # Pivot Table Header
        html.H3(
            id='client-pivot-table-header',
            children=dcc.Markdown(children='**Tabla de Clientes**'),
            style={
            'textAlign':'center'}
        ),

        # Client Pivot Table
        dash_table.DataTable(
            id='client-pivot-table',
            data=pvt_client_df.to_dict("rows"),
            columns=[{"name": i, "id": i} for i in pvt_client_df.columns],
            style_header={'backgroundColor': 'silver',
                        'fontWeight': 'bold',
                        'textAlign': 'center'
                        },
            style_table={'maxHeight': max_table_height,
                        'overflowY': 'scroll',
                        'maxWidth': max_table_width
            },
            style_cell={'minWidth': '0px', # min width of col
                        'maxWidth': '100px',# max width of col
                        'overflow':'hidden', #if text overflows col width, hide text
                        #'whiteSpace': 'normal', #  "wrap text"
                        'textOverflow':'ellipsis', # if overflow, show "..."
                        'textAlign': 'center'},

            style_cell_conditional=[
                                {'if': {'column_id': "Cliente"},
                                    'width': '35%',
                                    'overflow':'hidden',
                                    'textOverflow':'ellipsis',
                                    'textAlign':'left'},
                                    {"if": {"column_id": "$ Cotizado"},
                                    'textAlign': 'right'}],
            css=[{'selector': '.dash-cell div.dash-cell-value',
                'rule': 'display: inline; white-space: inherit; overflow: inherit;text-overflow: inherit;'}],
            editable=False,
            filtering=True,
            sorting=True,
            sorting_type="multi",
            row_deletable=False,
            selected_rows=[]
        )
    ],
    className = "six columns"),

    # ----- Supplier Pivot Table
    html.Div([
        # Pivot Table Header
        html.H3(
            id='supplier-pivot-table-header',
            children=dcc.Markdown(children='**Tabla de Suplidores**'),
            style={
                'textAlign':'center'
            }
        ),

        # Supplier Pivot Table
        dash_table.DataTable(
            id='supplier-pivot-table',
            data=pvt_supplier_df.to_dict("rows"),
            columns=[{"name": i, "id": i} for i in pvt_supplier_df.columns],
            style_header={'backgroundColor': 'silver',
                        'fontWeight': 'bold',
                        'textAlign': 'center'},
            style_table={'maxHeight': max_table_height,
                            'overflowY': 'scroll',
                            'maxWidth': max_table_width,
            },
            style_cell={'minWidth': '0px', # min width of col
                        'textAlign': 'center',
                        'maxWidth': '100px',# max width of col
                        'overflow':'hidden',
                        #'whiteSpace': 'normal', # "wrap text"
                        'textOverflow':'ellipsis' # if overflow, show "..."
                },

            style_cell_conditional=[
                                    {'if': {'column_id': "Suplidor"},
                                    'width': '35%',
                                    'overflow':'hidden',
                                    'textOverflow':'ellipsis',
                                    'textAlign':'left'},
                                    {"if": {"column_id": "$ Cotizado"},
                                    'textAlign':'right'}],
            css=[{'selector': '.dash-cell div.dash-cell-value',
                    'rule': 'display: inline; white-space: inherit; overflow: inherit; text-overflow: inherit;'}],
            editable=False,
            filtering=True,
            sorting=True,
            sorting_type="multi",
            row_deletable=False,
            selected_rows=[]
        )
    ],
    className = "six columns")
], className = "row");


if __name__ == "__main__":
    app.run_server(port=8081, debug=False)

clients csv

Cliente,P,Cot,Cotizado
Data goes here,0,3,Data goes here
Data goes here,0,4,Data goes here
Data goes here,0,6,Data goes here
Data goes here,0,1,Data goes here
Data goes here,0,9,Data goes here
Data goes here,0,12,Data goes here
Data goes here,0,4,Data goes here
Data goes here,0,1,Data goes here

suppliers csv

Supplidor,P,Cot,Cotizado
Data goes here,0,3,Data goes here
Data goes here,0,4,Data goes here
Data goes here,0,6,Data goes here
Data goes here,0,1,Data goes here
Data goes here,0,9,Data goes here
Data goes here,0,12,Data goes here
Data goes here,0,4,Data goes here
Data goes here,0,1,Data goes here

[danielgut10]

You are the man!!!!! This solved the problem. Thank you very much!!