Change Size of DatePicker


Hi there, I tried several ways to change the size of the DatePicker but none of them works.
Such as

  • Set the height of the DatePicker
  • Set the height of Div that wraps the DatePicker

Do you have any way that works? Thanks~

1 Like

Hi!
Did anyone find the answer to this question?

This works for me:

.DateInput_input, .DateInput_input_1 {
  Height: 30px;
}

this must be specified in css(assets)

The solution from @Masya worked for me too.

.DateInput_input, .DateInput_input_1 {
color: inherit !important;
text-align: center;
font-size: inherit ! important;
Height: 25px !important;
Width: 100% !important;
padding-left: 3px !important;
padding-right: 3px !important;
}

Overall if you “inspect” an element on the page you can access its CSS classes and change their layout. I’ve shown some examples here (https://gabri-albini.medium.com/create-a-professional-dasbhoard-with-dash-and-css-bootstrap-e1829e238fc5, on a dashboard I’ve created: https://corporate-dash.herokuapp.com/)

1 Like