Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] bWLwgP.css breaks dcc.DatePickerSingle

See original GitHub issue

Describe your context

dash                 1.3.0    
dash-core-components 1.2.0    
dash-html-components 1.0.1    
dash-renderer        1.1.0    
dash-table           4.3.0

OS: macOS 10.14.6
Browser Chrome
Version 76.0.3809.132

Describe the bug

The external stylesheet used in many examples in the dcc section of the docs (example), contains CSS about how tables are rendered, breaking how dcc.DatePickerSingle renders.

Stylesheet: https://codepen.io/chriddyp/pen/bWLwgP.css

CSS Lines that break the date picker (438-453):

/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
table {
  border-collapse: collapse;
}
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }

Expected behavior

Date picker shows all days of the month and is not cut off (see screenshots below).

Screenshots

Screenshot WITHOUT the CSS: Screen Shot 2019-09-19 at 16 21 43

Screenshot WITH the CSS: Screen Shot 2019-09-19 at 16 21 23

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

chriddypcommented, Oct 3, 2019

👍 fixed in codepen

4reactions

christianwengertcommented, Oct 3, 2019

Solution:

Add

td.CalendarDay {
  padding: 0;
}

to your last included css file. This fixed all problems for me

Top Results From Across the Web

DatePickerSingle | Dash for Python Documentation | Plotly

dcc.DatePickerSingle is a component for rendering a calendar from which the user can select a date. You can use either strings in the...

Dash layout is a mystery - I feel like I am programming in Lisp

in EDIT 2 above almost works! But when I click on the components, instead of the dropdown going over the table, the table...

Dash User Guide and Documentation

Dash is a productive Python framework for building web applications. Written on top of Flask, Plotly.js, and React.js, Dash is ideal for building...

Creating an Interactive Data app using Plotly's Dash | by Kyle

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css'] app = dash. ... dcc.Graph(id='Mygraph'), html.Div(id='output-data-upload')

Dash Core Components

To style marks , include a style css attribute alongside the list value. ... list( dccDatePickerSingle( id='my-date-picker-single', min_date_allowed=as.