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
6 Answers, 1 is accepted
Rank 1
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?
Rank 1
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?
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
Rank 1
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
Rank 1
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