RadDatePicker right to left align Issue

6 posts, 1 answers
  1. Ramesh
    Ramesh avatar
    5 posts
    Member since:
    May 2012

    Posted 13 Oct 2013 Link to this post

    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.
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Oct 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ramesh
    Ramesh avatar
    5 posts
    Member since:
    May 2012

    Posted 21 Oct 2013 Link to this post

    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
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Oct 2013 Link to this post

    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
  6. Ramesh
    Ramesh avatar
    5 posts
    Member since:
    May 2012

    Posted 23 Oct 2013 Link to this post

    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>

  7. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Oct 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017