Repository of CSS style for dash core components

Dash Python
1

Hi,

I’m trying to customize a DatePickerSingle component in an app I’m making, but having a bit of trouble getting the layout that I want. Shortly described, I want the pop-up calendar to be bigger, so it is easier to navigate on a phone or tablet. Changing the size includes both the date number and all the different classes that constitutes the calender.

I’ve come quite far by inspecting the app via DevOps in Chrome, but I cannot figure how to make the container for the table dynamic, depending on how many rows that are needed to show all the days of the month, see picture below.

image

When I have the original styling, i.e., not using any of my own CSS for the DatePickerSingle, I can see that the height in the CSS code for some of the divs is either 300px or 319px, depending on the number of rows. Where can I find the original CSS style coding for the dash core components? I figure that could help me understand how to customize the components.

I have looked in the github repository (dash/components/dash-core-components at dev · plotly/dash · GitHub), but I can only find the javascript code for the components there.

Furthermore I have tried finding other topics here on the forum, and in this thread (Editing DateInput and SingleDatePicker style in css) I found a link to what seems to be some kind of repository (https://unpkg.com/browse/dash-core-components@0.12.3/dash_core_components/), but I couldn’t find the CSS-classes as I can see from DevOps.

So, in short, is there a public repository of how the components are styled originally?

Thanks in advance!

2

Hi,

The date pickers in dcc are in fact React compoents from react-dates. You can find some instructions to customize it via css here, but I wouldn’t expect to be a super simple task.

If you are open to experiment other component libraries, I would strongly recommend the Date Pickers (and all the other components, honestly) from dash-mantine-components:

I don’t know if it would fix all your problems, but it should at least give a consistent look in different screen sizes.

1 Like
3

Thanks for the answer!

Didn’t really figure out how to fix it properly. I am able to override some of the CSS properties but can not figure how the dynamic height is controlled.

I’ve skipped this probelm for now, perhaps I return to it later.

Cheers for the help anyway!