Datepicker font control

#1

DatepickerSingle and DatepickerRange are rendered with font size larger than Dropdown and Input.
How to equalize these components font sizes?

2 Likes
#2

You will need to modify the CSS of these components. You may be able to do this by setting the font-size of the parent component with something like html.Div(style={'fontSize': 10}, children=dcc.DatePickerSingle(...)). For reference, here are the default stylesheets of these components: https://github.com/plotly/dash-core-components/blob/master/dash_core_components/react-dates%4012.3.0.css

1 Like
#3

Adding css to the parent component will just change the font of the calendar, but not the font of the “input” filter

For example, I changed the fontsize to 5px:

image

How can the input date font size be changed?

#4

Hi chriddyp,

Datepicker does not have a className parameter, how can I set a CSS style to influence it?

#5

I recommend reading through the source to see the underlying markup of the component and the available properties: https://github.com/plotly/dash-core-components/blob/557d2fd4987c437265d220f71ee69c2d0616526c/src/components/DatePickerSingle.react.js#L106-L132

#6

Hi chriddyp,

I have read the underlying markup and I haven’t found any option to modify aspects of the datepicker, such as font size, box width and height, etc. I don’t know If I’m missing something. It’s possible to change any of these properties?

Thanks in advance!

#7

It seems the default datepicker cannot be modified… I guess the only way to go would be to create your own dash component from react and expose the attributes you want to modify? Ugh…

#8

These properties are all modif-able by overriding the underlying component’s CSS, which you can inspect using the browser’s dev-tools.

#9

Easier than you think:

  • Make subfolder named assets in the folder your app resides

  • Create a css file, for instance datepicker.css, with content:

    .DateInput { font-size: inherit; }

  • In your app, you may now modify the font size.
    For instance, if I put the DatePickerSingle inside a table cell:

    html.Td([ dcc.DatePickerSingle(...) ], style = {'fontSize': 8})

2 Likes
#10

Hi jvt, this seems to fail on my side. I suspect, though, that I didn’t get local css right. Is there any statement I need to add in my app to use the css under /assets? Basically I add this line in .css:

.DateInput { height: inherit; }

And in my app have:
html.Td([ dcc.DatePickerSingle(...) ], style = {'height': "24px"})

#11

Not sure about what you intend, but you may try line-height instead of height

#12

I’ve just noticed that unfortunately this approach does not seem to work if the app is loaded inside django with DashApp from django_plotly_dash. The fontsize remains untouched, its size is fixed in an inline style sheet that can not be overriden

1 Like
#13

Thanks. I’m not using Django and maybe this will work. I’ll get back to you once I have a change to touch the code. Thanks again for helping me out.

#14

After upgrading to the latest and greatest dash, my DatePickerSingle are misbehaving a little and it looks like a font issue. I am unable to bring this under control using the font size CSS of the Div container.

The screen below explains it. Calendar 1 was produced without the external css, bWLwgP.css, (line 16) and calendar 2 (with misaligned days and over sized grid) was created by including line the external css.

What do I need to do to get the calendar 2 aligned and sized correctly without the need to exclude the external css file?

#15

After carefully examining bWLwgP.css, it looks like the padding in th,td section of the Tables is causing the issue. I initially tried to set the padding to zero in the style of the parent Div “style={‘padding’: ‘0px 0px’}” , but that didnt work. I also tried setting padding-left, padding-right etc, but none worked.

As a workaround I copied the bWLwgP.css locally in the assets folder, edited the padding entry as shown in the image:

image

This fixes the problem with the calendar grid, but messes up the default padding for my tables.

Anyone has a more elegant solution?

/mo