How to change the width of date range picker

Dash Python
1

HI there,

I am having trouble changing the width of the date range picker, adding styles doesn’t seem to have an effect on the component, is there anyway to solve this?

2 Likes
2

I am also trying to style the date-range picker. Maybe changing font size or heights?
It always comes as a fat box that makes it stick out in some situations.

Are there styles that can be applied?
Tried changing div styles but no effect.

3

I have the same question, please someone can answer?

1 Like
4

Seems a bit late, but due to specificity you have to dig inside the components to solve this problem, for instance:

.DateRangePickerInput {
  background-color: inherit;
  width: auto;
}

and to change things like arrow one can change the following class for example:

.DateRangePickerInput_arrow_svg {
  /* things you want to overwrite */
}

Although a satisfiable output requires quite some tuning…

1 Like