Dropdown issue: window scrolls when clicking dropdown

I’m trying to create a table with 30 to 31 rows that should have dropdowns for names in 4 columns. I’m following the examples in the documentation and what happens is this: the table gets displayed, not all rows showing, they don’t fit in the screen. I go to row 1 and try to open the dropdown for one of the columns, then I’m taken to the bottom of the table, as if had scrolled all the way down. I go back up and see the dropdown actually displays the values. Here’s the code I’m using:

# -*- coding: utf-8 -*-
Spyder Editor

This is a temporary script file.

import dash
#import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import dash_table
import pandas as pd
from datetime import datetime, timedelta, date
import calendar
from collections import OrderedDict

app = dash.Dash(__name__)

mycolumns = ['Date', 'Day', 'AM Dispatcher', 'PM Dispatcher', 'POC 1', 'POC 2']
mymonth = '2019-04-01'

def add_months(sourcedate, months):
    month = sourcedate.month - 1 + months
    year = sourcedate.year + month // 12
    month = month % 12 + 1
    day = min(sourcedate.day, calendar.monthrange(year,month)[1])
    return date(year, month, day)

def createtimerange(mymonth):
    fromdate = datetime.strptime(mymonth, '%Y-%m-%d').date()
    todate = add_months(fromdate,1)
    diffdays = todate - fromdate
    mylist = [fromdate + timedelta(days=i) for i in range(diffdays.days)]
    return [i.strftime('%Y-%m-%d') for i in mylist]

def getdayofweek(daynumber):
    if daynumber == 0:
        return 'Monday'
    elif daynumber == 1:
        return 'Tuesday'
    elif daynumber == 2:
        return 'Wednesday'
    elif daynumber == 3:
        return 'Thursday'
    elif daynumber == 4:
        return 'Friday'
    elif daynumber == 5:
        return 'Saturday'
        return 'Sunday'

df = pd.DataFrame(columns = mycolumns)
df['Date'] = createtimerange(mymonth)
df['WeekDay'] = df['Date'].apply(lambda x: datetime.strptime(x,'%Y-%m-%d').weekday() )
df['Day'] = df['WeekDay'].apply(lambda x: getdayofweek(x))
del df['WeekDay']

namespoc = ['Name 1', 'Name 2', 'Name 3', 'Name 4']
namesdis = ['Name 1', 'Name 2']

app.layout = html.Div([
                    {'id': 'Date', 'name': 'Date'},
                    {'id': 'Day', 'name': 'Day'},
                    {'id': 'AM Dispatcher', 'name': 'AM Dispatcher', 'presentation': 'dropdown'},
                    {'id': 'PM Dispatcher', 'name': 'PM Dispatcher', 'presentation': 'dropdown'},
                    {'id': 'POC 1', 'name': 'POC 1', 'presentation': 'dropdown'},
                    {'id': 'POC 2', 'name': 'POC 2', 'presentation': 'dropdown'}
        editable = True,
                        'id': 'AM Dispatcher',
                        'dropdown': [{'label': i, 'value': i} for i in namesdis]
                        'id': 'PM Dispatcher',
                        'dropdown': [{'label': i, 'value': i} for i in namesdis]        
                        'id': 'POC 1',
                        'dropdown': [{'label': i, 'value': i} for i in namespoc]        
                        'id': 'POC 2',
                        'dropdown': [{'label': i, 'value': i} for i in namespoc]        

@app.callback(Output('table-dropdown-container', 'children'),
              [Input('table', 'data_timestamp')])
def update_output(timestamp):
    return timestamp

if __name__ == '__main__':
1 Like

Hi, I had same issues with the dropdown. Any one knows what happened?