Flickering scroll bar

[chriddyp]

We have received a report that a

On versions >1.9.1, including 1.13.4, a flickering scroll bar appearing randomly on pages with Dash Table. This is not observed in 1.9.1 but observed in versions after this

I am unable to reproduce this and I haven't seen this any other examples. If any folks from the community run into this, could you please share a GIF or a video of this behavior? Thank you!

[sheldonrong]

@chriddyp

I'd like this issue addressed, it is really annoying.

The issue is caused by the dash-table inserting a div at the end of the body like this:

<div style="position: absolute; visibility: hidden; width: 100px; height: 100px; overflow: scroll;">
 <div style="width: 100px; height: 100px;"></div>
</div>

the thing here is that visibility: hidden does not mean it doesn't take space, and this is the reason why there is flickering.

this happens when you set up an Interval update for the dash table, and the table is about the height of the window. because of the update, this invisible div is constantly being removed and re-inserted during the update of the table.

[Marc-Andre-Rivet]

This would indeed be hard to reproduce, but does look like we've introduced a regression in 1.13.0 as part of #777 causing this phantom element used for evaluating if the scrollbars are always displayed (OS setting, IE11) (for alignment purposes) to be checked on every render. Given the right window or parent element size this could indeed cause a flickering scrollbar.

[nickmuchi87]

I have been experiencing this as well, y axis scrollbar appears and disappears as I hover on some of the columns of the datatable. Any idea how to resolve that?

[alexcjohnson]

@nickmuchi87 what versions of dash and dash-table do you have? Can you make a standalone example that reproduces the issue?

[nickmuchi87]

Hi Alex, example below that replicates the issue, I realised if i set the table width as 99.8% or any other figure which is not 100%, the issue is fixed:

versions:

dash: 1.19.0
dash_table: 4.11.2

imports

import pandas as pd import dash import dash_table import dash_core_components as dcc import dash_html_components as html from dash.dependencies import Input, Output, State from dash.exceptions import PreventUpdate import dash_bootstrap_components as dbc from jupyter_dash import JupyterDash

`ccy = ['USD','EUR','GBP','AUD']

ticker_list = ['AAPL','TSLA','MSFT','BHP','APTAU']

reco_list = ['Buy','Sell','Hold','Strong Buy','Buy']

rank_list = [1,2,3,4,5]

df_curr = pd.DataFrame({'Currency':[random.choice(ccy) for i in range(1,50)], 'TICKER':[random.choice(ticker_list) for i in range(1,50)],
'Reco':[random.choice(reco_list) for i in range(1,50)],'Rank':[random.choice(rank_list) for i in range(1,50)],
'External Rank':[random.randint(0,5) for i in range(1,50)],'Other Rank':[random.randint(0,10) for i in range(1,50)]})

app = JupyterDash(name,external_stylesheets=[dbc.themes.SLATE])

app.layout = html.Div([html.Div(html.H1('RANK FILES',
style = {'textAlign':'center','fontSize':30, 'color': 'maroon', 'border':'3px black solid'})),

 dcc.Store(id = 'store'),

 dbc.Row(
 dbc.Col(html.Div(html.H3('Select your rank file by currency:', style = {'fontSize':20}),
 style={'padding-left':'10px','margin-top':'20px'}),
 width ={'size':4})),
 
 #File selection dropdown
 dbc.Row(
 dbc.Col(html.Div(dcc.Dropdown(id = 'titles', options = [{'label':i,'value':i} for i in ccy],
 value=ccy[0], 
 multi=False,
 placeholder = 'Select currency'),
 style={'padding-left':'10px'}),
 width = {'size':2})),
 
 dbc.Row([
 dbc.Col([
 html.Div([
 html.H3('Filter by Ticker:',style = {'fontSize':20,'margin-top':'70px'}),
 dcc.Dropdown(id = 'ticker',
 multi=True,
 searchable =True,
 placeholder = 'Select Ticker')],
 style={'padding-left':'10px'})],
 width = {'size':2}),
 
 dbc.Col([
 html.H3('Filter by Reco:',style = {'fontSize':20,'margin-top':'70px'}),
 dcc.Dropdown(id = 'Reco',
 multi=True,
 searchable=True,
 placeholder = 'Select Reco')],
 width = {'size':4, 'offset':1}),
 
 dbc.Col([
 html.H3('Filter by Rank:',style = {'fontSize':20,'margin-top':'70px'}),
 dcc.Dropdown(id = 'rank',
 multi=True,
 searchable=True,
 options=[{'label':i,'value':i} for i in sorted([1,2,3,4,5])],
 placeholder = 'Select Rank')],
 width = {'size':4, 'offset':1})
 ]
 ),
 
 html.Div([html.Div([html.H3(id = 'table_header',style = {'fontSize':20,
 'display':'inline-block','margin-top':'20px'}), html.H3(id = 'table_header_2',style = {'fontSize':20,
 'display':'inline-block','verticalAlign': 'top','margin-top':'20px'})]),
 dash_table.DataTable(id = 'my_table',
 style_table={'overflowX':'auto'}, # defaults to 500
 fixed_rows = {'headers':True},
 style_cell = {
 'textAlign': 'left',
 'whiteSpace':'normal',
 'height': 'auto'}, 
 )], style = {'margin-top':'30px','fontSize':20,'padding-left':'10px'}),
 
 html.Div([html.H3('Selected tickers across all rank files:', style = {'padding-left':'10px','fontSize':20,
 'margin-top':'50px'}),
 
 dash_table.DataTable(id = 'my_table_select',
 style_table={'width':'100%'}, # defaults to 500
 fixed_rows = {'headers':True},
 style_cell = {
 'textAlign': 'left',
 'whiteSpace':'normal',
 'height': 'auto'}
 )
 ]
 )
 
 ]
 )

#Callback that updates the table header name when dropdown value is changed
@app.callback([Output('ticker','options'),Output('Reco','options'),
Output('rank','options'),Output('store','data')],
[Input('titles', 'value')])
def update_table_and_header(title):

if title is None:
 raise PreventUpdate
 
dff = df_curr.loc[df_curr['Currency'].isin([title])]

ticker_o = [{'label':i,'value':i} for i in sorted(dff['TICKER'].unique())]

reco_o = [{'label':i,'value':i} for i in sorted(dff['Reco'].unique())]

rank_o = [{'label':i,'value':i} for i in sorted([1,2,3,4,5])]

data = dff.to_dict('records')

return ticker_o, reco_o, rank_o, data

@app.callback([Output('my_table','data'),Output('my_table','columns')],
[Input('ticker','value'),Input('Reco','value'),
Input('rank','value'),Input('store','data')])
def update_table(ticker,ind,rank,data,):
if data is None:
raise PreventUpdate

df = pd.DataFrame(data)

if ticker:
 df = df.loc[df['TICKER'].isin(ticker)]
 df.sort_values(['Rank'],inplace=True)
 
if ind:
 df = df.loc[df['Reco'].isin(ind)]
 df.sort_values(['Rank'],inplace=True)
 
if rank:
 rank = [str(i) for i in rank]
 df = df.loc[df['Rank'].isin(rank)]
 df.sort_values(['Rank'],inplace=True)
 
columns = [{'id': c, 'name': c, "clearable": True} for c in df.columns]
 
return df.to_dict('records'), columns

@app.callback([Output('my_table_select','data'),Output('my_table_select','columns')],
[Input('ticker','value'),Input('store','data')])
def update_filter_table(ticker,data):

if ticker is None:
 raise PreventUpdate
 
dff = pd.DataFrame(data)
 
df_all = dff.loc[dff['TICKER'].isin(ticker),['Currency','TICKER','Rank','Reco']]

df_all.reset_index(drop=True,inplace=True)

columns = [{'id': c, 'name': c} for c in df_all.columns]

return df_all.to_dict('records'), columns

#run app
if name =='main':
app.run_server(debug = True, port=port)`

screenshots of scroll bar appearing and disappearing

Thanks