This is a migrated thread and some comments may be shown as answers.

RadDatePicker right to left align Issue

5 Answers 338 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Ramesh
Top achievements
Rank 1
Ramesh asked on 13 Oct 2013, 06:31 AM
I am using a ASP.NET Ajax telerik control 2013 release. Created a Rad Date picker with width of 100px. Textbox is appearing same width as 100px in page's default direction 'ltr'. But when I changed the page direction 'rtl' textbox width is shrinking.

Please see the attachment more clarification. help me to solve the issue.

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 15 Oct 2013, 03:38 AM
Hi Ramesh,

Please have a look into the following code snippet that I tried which works fine at my end.

ASPX:
<telerik:RadDatePicker ID="RadDatePicker1" runat="server" DateInput-CssClass="InputText" style="direction : rtl;">
</telerik:RadDatePicker>

CSS:
<style type="text/css">
.InputText
{
    width : 100px !important;
}
</style>

Thanks,
Shinu.
0
Ramesh
Top achievements
Rank 1
answered on 21 Oct 2013, 10:26 AM
Hi

If it is a multilingual site, width will be fixed only direction will change. I was also getting the same output, but I want to reduce the gap between rad date picker image and textbox.

Please check the attachment.

Thanks & Regards,
Ramesh T
0
Shinu
Top achievements
Rank 2
answered on 23 Oct 2013, 08:35 AM
Hi Ramesh

Try the following CSS to get the desired result,I have also attached an screenshot of the result.
Hope this is what you want.

CSS:
<style type="text/css">
  .RadInputRTL
  {
    text-align:left !important;
  }
</style>

Thanks
Shinu
0
Ramesh
Top achievements
Rank 1
answered on 23 Oct 2013, 11:53 AM

Above CSS will be used to align the textbox to right or left. This will not reduce the gap between Text input and datepicker button.

Here is the sample html code and output can you correct this.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .RadInputRTL
        {
            text-align: left !important;
        }
    </style>
</head>
<body dir="ltr">
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false" />
    <div>
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <fieldset>
                        <legend>RadDatePicker With 100px Width</legend>
                        <table border="0" cellpadding="2" cellspacing="2">
                            <tr>
                                <td>
                                    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" Width="100px" dir="ltr">
                                    </telerik:RadDatePicker>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <telerik:RadDatePicker ID="RadDatePicker3" runat="server" BorderWidth="0" Width="100px"
                                        dir="rtl">
                                    </telerik:RadDatePicker>
                                </td>
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

0
Accepted
Shinu
Top achievements
Rank 2
answered on 24 Oct 2013, 05:46 AM
Hi Ramesh,

I tried your code with Telerik 2013 Q1 version, which works as expected. But the issue is replicable in Telerik 2013 Q2 version. As a work arround please try the following CSS.

CSS:
<style type="text/css">
    .RadInputRTL
    {
        text-align: left !important;
        padding-left: 0 !important;
    }
</style>

Thanks,
Shinu.
Tags
Calendar
Asked by
Ramesh
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Ramesh
Top achievements
Rank 1
Share this question
or