Display problem dcc.DatePickerRange, doesn't render completely

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?

1 post - 1 participant

Read full topic