Flickering scroll bar #801

Activity

1. chriddyp

   added

   Status: Triage Needed

   on Jul 6, 2020
2. sheldonrong commented on Jul 17, 2020

   

   sheldonrong

   on Jul 17, 2020

   Last edited by sheldonrong

   More actions

   @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.
3. Marc-Andre-Rivet commented on Jul 23, 2020

   

   Marc-Andre-Rivet

   on Jul 23, 2020

   Contributor

   More actions

   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.
4. Marc-Andre-Rivet

   added

   regressionWorked in a previous versionWorked in a previous version

   dash-type-bugSomething isn't working as intendedSomething isn't working as intended

   size: 0.5

   and removed

   Status: Triage Needed

   on Jul 23, 2020
5. Marc-Andre-Rivet

   closed this as completedin #809on Jul 23, 2020
6. nickmuchi87 commented on Feb 16, 2021

   

   nickmuchi87

   on Feb 16, 2021

   More actions

   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?
7. alexcjohnson commented on Feb 16, 2021

   

   alexcjohnson

   on Feb 16, 2021

   Collaborator

   More actions

   @nickmuchi87 what versions of dash and dash-table do you have? Can you make a standalone example that reproduces the issue?
8. nickmuchi87 commented on Feb 17, 2021

   

   nickmuchi87

   on Feb 17, 2021

   Last edited by nickmuchi87

   More actions

   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