Style of DatePickerrange seems screwed up in the demo

Dash Python
1

Hi,

I took the first example from dcc.DatePickerRange | Dash for Python Documentation | Plotly and ran a test server.

However my datepickerrange looks different than the one shown on the page. The dates on top of the calendar doesn’t align with the grid.

image

I have these dash package versions in my python environment:

dash (0.41.0)
dash-core-components (0.46.0)
dash-daq (0.1.4)
dash-html-components (0.15.0)
dash-renderer (0.22.0)
dash-table (3.6.0)

2

I have the same issue

3

Are you using custom CSS?

4

I’m using the css supplied by the example:

external_stylesheets = [‘https://codepen.io/chriddyp/pen/bWLwgP.css’]

app = dash.Dash(name, external_stylesheets=external_stylesheets)

5

Sorry - I missed your post. No, I am not using any custom CSS for the datepicker. Still doesnt work with dash 0.42.0

6

The example shown in the user guide is not displaying correctly for me in Chrome as well

7

I also have the same exact issue with this component. No idea of a fix, I assumed it was my CSS.

html.Div(children=[
						html.Div(children = 'Select Date Range:', style = {'font-weight': 'bold'}),
						dcc.DatePickerRange(id = 'datePicker', min_date_allowed=dt(2017,1,1), max_date_allowed=today, initial_visible_month=today.date(), minimum_nights=0, start_date = None, end_date = None, disabled = True),
					],style={'margin-bottom': '5px', 'width': '100%'}),
8

On the repository for dash-core-components there is an open issue for it #549. User @brolewis provided a fix in the issue comments:

It looks like the css has

th, td {
    padding: 12px 15px;
}

which is causing the cells to grow too large. I fixed this in my project with:

td.CalendarDay {
  padding: 0;
}

The same fix works for me at least! :slight_smile:

4 Likes
9

Solve my problem! Thanks a lot!

10

It solves my problem too. Thank you so much!