difficulty in RadDatePicker responsiveness

[Cristiano]

As you can see from the image, on mobile devices the date ends up breaking and making it impossible to view it completely.

This is my code:
<div class="col-xl-3 col-sm-6 col-md-6 col-xs-12 mb-2">
    <span class="EstiloLabelSimples">Data Vencimento:</span>
    <telerik:RadDatePicker RenderMode="Lightweight" ID="txtDataVencimentoCadastro" Width="100%" runat="server" />
</div>

I've tried using other RenderMode types, but none of them worked. Could someone help me achieve this responsiveness?

[Rumen]

Hi Cristiano,

Thank you for providing the screenshot and details.

The issue you're encountering is likely due to the fixed dimensions and layout constraints of the RadDatePicker popup on smaller screens.

To improve responsiveness on mobile devices, you can adjust the calendar popup dimensions using CSS. For example:

        <style type="text/css">
            /*Calednar*/ html .RadCalendar,
            /*MonthYearPicker, RadDatePicker FastNavigation Popup*/ html .RadCalendarMonthView,
            /*TimeView Popup*/ html .RadCalendarTimeView {
                font-size: 18px;
            }
        </style>

You can find more information in the documentation:

• https://www.telerik.com/products/aspnet-ajax/documentation/controls/datepicker/mobile-support/fluid-and-elastic-capabilities#elastic-capability 
• https://www.telerik.com/products/aspnet-ajax/documentation/controls/datepicker/mobile-support/render-mode 
• https://www.telerik.com/products/aspnet-ajax/documentation/mobile-support/responsive-behaviors#list-of-controls-with-responsive-behaviors 

As an alternative approach, you could consider conditionally hiding the RadDatePicker on narrow viewports (e.g., using a media query) and displaying a native HTML5 date input instead:

<input type="date">

Regards,
Rumen
Progress Telerik