Bad styling on DateRangePicker

[IT Dept]

The DateRangePicker component adds an element style of `{display: inline-block}` to the `span.k-daterangepicker-wrap` component which prevents me from styling custom `startDateInput`/`endDateInput` components with full width to fill my form.

 

How can I override this style, or can it be removed from the kendo rendering?

It's too bad there is no render prop that just renders both input components, that would add a lot of flexibility.

Thank you

[IT Dept]

You can see on here: https://evvrv4.run.stackblitz.io

The k-daterangepicker-wrap is not 100% width, despite no css rules in the inspector showing why. I can force it to 100% with an element style, but there's no way to do this via the react api. I could set a custom css rule for l-daterange-wrap, but it doesn't seem like that should be necessary. Why is the width limited for that div?

[IT Dept]

You can see on here: https://evvrv4.run.stackblitz.io

The k-daterangepicker-wrap is not 100% width, despite no css rules in the inspector showing why. I can force it to 100% with an element style, but there's no way to do this via the react api. I could set a custom css rule for l-daterange-wrap, but it doesn't seem like that should be necessary. Why is the width limited for that div?

[Stefan]

Hello, Eric,

The inline-block style is actually to allow controlling the width of the span:

https://stackoverflow.com/questions/10085557/set-percentage-width-for-span-element

This is an example of how to make the DateRangePicker and its inputs expand:

https://stackblitz.com/edit/react-cr4k4g?file=app/main.jsx

.k-textbox-container {
  width: 49%;
}
.k-daterangepicker-wrap {
  width: 100%
}

Regards,
Stefan
Progress Telerik

[IT Dept]

A more React-y pattern would be to enable adding styles or classNames to the relevant element via the react API, rather than forcing the generated HTML to be inspected and CSS rules written to match. This pattern won't work with styled components or css modules for instance and I must either import a global style rule that will affect all instances of DateRangePicker, or manually namespace each usage I want with a custom class name. I'm not sure this nested span pattern is necessary for this component.

Anyway, I'll either decide how I'd like to do the CSS rules for these in my project and/or explore some of the other react datepicker libraries. 

Thank you,
Eric

[IT Dept]

I'll note again though, I see 0 reason that the k-daterangepicker-wrap is necessary as an inner span within the k-daterangepicker span, and if there was only one then the style/class property for that single span could be easily exposed.

[Kiril]

Hello Eric,

The reason behind having an 'inline-block' display style on the 'k-daterangepicker-wrap' elements is the following:
- With block styling, the element does not take the full height.
- The element is used as an anchor for the Popup.
- The popup anchor appears a few pixels higher than it is supposed to be.

Thank you for bringing this to our attention. Right now we are discussing a couple of possible approaches for it, which you can track in the following public ticket: https://github.com/telerik/kendo-react/issues/380

Also, please have in mind that our components work with Styled components, and you can make a custom-styled version of the DateTimePicker:

https://www.telerik.com/kendo-react-ui/components/styling/styled-components/

Please let me know if you have any questions.

Regards,
Kiril
Progress Telerik