Progress® Telerik® UI for ASP.NET AJAX Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 08 Apr 2020 15:43 by ADMIN
Dan Avni
Created on: 05 Aug 2019 16:57
Category: DatePicker
Type: Bug Report
0
Date/Time Pickers with RTL accessibility, picker button not displayed accordingly.

Hi,

For the date picker and it's family of controls (time picker, date time picker), when using bootstrap skin, lightweight rendering and RTL page, the buttons for the picker are displayed on the wrong side of the control (the right side) instead of being displayed on the left side. I know this can be fixed using some CSS but although the html controls are in order (text and then button both in a container with RTL), the button is stuck to the right side somehow

please advise

1 comment
ADMIN
Attila Antal
Posted on: 05 Aug 2019 17:03

Thank you for taking the time reporting this issue.

The date and time pickers have only partial support for the RTL accessibility mode which is not the expected behavior. This bug will be reviewed and eventually get fixed.

Until a fix is provided, the following example CSS could provide a viable workaround. This overrides the appearance for the Bootstrap Skin and styles the picker to have its button on the left instead.

<style type="text/css">
    body {
        font-size: 14px;
    }
 
    .RadPicker_Bootstrap .RadInputRTL .riTextBox {
        padding-right: unset;
        float: right;
        padding-left: 2.286em;
    }
 
     .RadPicker_Bootstrap .RadInputRTL .rcSelect {
        right: unset;
        left: 1px;
         
    }
 
    .RadPicker_Bootstrap .RadInputRTL .rcSelect {
        border-radius: 4px 0 0 4px;
    }
 
    .RadPicker_Bootstrap .RadInputRTL .rcSelect .rcCalPopup {
        border-left-width: unset;
        border-left-style: unset;
        border-right-width: 1px;
        border-right-style: solid;
    }
</style>

 

Please accept our apology for any inconvenience this may have caused.

Create an account Log In
View
Type
Status
Category