Display problem dcc.DatePickerRange, doesn't render completely

[sajansen1404]

Hi,

I have a problem with the dcc.DatepickerRange component in my Dash dashboard (written in Python). The component doesn’t render completely, the header of a dashtable.DataTable can be seen trough it.

My code is as following:

dcc.DatePickerRange(id='date-range-picker',
                    display_format='DD-MM-Y',
                    start_date = min_date,
                    end_date = max_date,
                    start_date_placeholder_text="Begin datum",
                    end_date_placeholder_text="Eind datum",
                    calendar_orientation='vertical',
                    className='date-range-picker')

And this is my CSS:

/* Date picker */
.DateRangePicker {
  font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
  position: relative;
  display: inline-block;
  width:100%;
}
.DateInput_input, .DateInput_input_1 {
  font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
  text-align: center;
  Height: 34px !important;
  Width: 100% !important;
  padding-left: 3px !important;
  padding-right: 3px !important;  
  font-size: 0.9em;
  color: #333 !important;
}

.DateRangePickerInput__withBorder {
  font-family: "Lucida Grande", "Lucida Sans", "Lucida", sans-serif;
  background-color: #fff;
  border-radius: 1px;
  border: 1px solid #ccc;
  color: #333;
  display: table;
  border-spacing: 0;
  border-collapse: separate;
  height: 36px;
  overflow: hidden;
  box-shadow: 0 3px 3px rgba(0,0,0,0.2);
  width:100%;
  text-align: center;
}

It this problem known and does anyone know a fix?

[joseph.damiba]

Hello! I have some questions that will help us debug your issue.

What versions of Dash and the DataTable are you using?

And how are you styling the DataTable? In this case it looks like the “z-index” CSS property of the DataTable HTML header element is causing it to appear on top of the DatePickerRange dropdown menu. Are you just using a CSS file to style your dashboard or you using a third party library like Dash Bootstrap components?

If you take a look at this following example app where the DataTable is not styled at all, you should see that the DataTable is always beneath the DatePickeRange dropdown.

import dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from datetime import date


app = dash.Dash(__name__)
server = app.server  # expose server variable for Procfile

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/solar.csv')

app = dash.Dash(__name__)

app.layout = html.Div([

    dcc.DatePickerRange(id='date-range-picker',
        display_format='DD-MM-Y',
        start_date = date(1995, 8, 5),
        end_date = date(2017, 9, 19),
        start_date_placeholder_text="Begin datum",
        end_date_placeholder_text="Eind datum",
        calendar_orientation='vertical',
        className='date-range-picker'
    ),

    dash_table.DataTable(
        id='table',
        columns=[{"name": i, "id": i} for i in df.columns],
        data=df.to_dict('records'),
    ),
])

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