RadDatePicker Padding

9 posts, 2 answers
  1. Eng.Bassel Samman
    Eng.Bassel Samman avatar
    25 posts
    Member since:
    Oct 2008

    Posted 05 Aug 2010 Link to this post

    How can I get rid of RadDatePicker padding.
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 09 Aug 2010 Link to this post

    Hi Bassel,

    Please refer to the following resouces:

    http://www.telerik.com/help/aspnet-ajax/calendar_appearanceunderstandingtheskincssfile.html

    http://www.telerik.com/help/aspnet-ajax/calendar_appearancecssskinfileselectors.html

    http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

    If you need further assistance, please specify which padding exactly do you mean.

    Regards,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Eng.Bassel Samman
    Eng.Bassel Samman avatar
    25 posts
    Member since:
    Oct 2008

    Posted 09 Aug 2010 Link to this post

    Ok,
    I have table consists of two rows.
    I put RadDatePicker in the first row's cell and any other control (e.g. TextBox, DropDownList,) in the second row's cell.
    The RadDatePicker  and the other control do not have the same horiziontal start point, I thought that maybe of special padding of RadDatePicker css.

    I figured that the form direction (RTL) was the cuase, so please test the following page with and without form dir="rtl" to see the problem.
    So, The question is how to remove the resultant paadding of RadDatePicker in RTL.
    Best Regards

     

    <head runat="server"
        <%@ register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    </head
    <body
        <form id="form1" runat="server" dir="rtl"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true"
        </telerik:RadScriptManager
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
        </telerik:RadAjaxManager
        <table
            <tr
                <td
                    <telerik:RadDatePicker ID="RadDatePicker" runat="server"
                    </telerik:RadDatePicker
                </td
            </tr
            <tr
                <td
                    <asp:TextBox ID="TextBox" runat="server"></asp:TextBox
                </td
            </tr
        </table
        </form
    </body
    </html>

     

     

     

     

     

     

     

     

     

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 10 Aug 2010 Link to this post

    Hello Bassel,

    Please use the following CSS rule:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    <style type="text/css">
     
    div.RadPicker table.rcTable .rcInputCell
    {
        padding:0 0 0 4px;
    }
     
    </style>
    </head>
    <body dir="rtl">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <table>
        <tr>
            <td>
                <telerik:RadDatePicker ID="RadDatePicker" runat="server">
                </telerik:RadDatePicker>
            </td>
        </tr>
        <tr>
            <td>
                <asp:TextBox ID="TextBox" runat="server"></asp:TextBox>
            </td>
        </tr>
    </table
     
    </form>
    </body>
    </html>



    Greetings,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Eng.Bassel Samman
    Eng.Bassel Samman avatar
    25 posts
    Member since:
    Oct 2008

    Posted 11 Aug 2010 Link to this post

    Than you very much, By the way I have another similar problem I have a RadUpload Control in the same page:
    <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MaxFileInputsCount="1" CssClass="ImgRadUpload"
    <Localization Select="اختيار صورة" /> 
    </telerik:RadAsyncUpload>

    with the following CSS rules:

    .ImgRadUpload input.ruFakeInput
    {
       display: none;
    }
    .ImgRadUpload input.ruBrowse
    {
       width: 115px;
    }
    .ImgRadUpload span.ruFileWrap input.ruButtonHover
    {
      background-position: 100% -46px;
    }
    .ImgRadUpload input.ruButton
    {
      background-position: 0 -46px;
    }

    I am using the previous CSS rules to hide the Radupload controls, everything is working correctly without RTL, when I set the RTL to true I can still click the upload button but when I move the cursor on the button it is trying to enter the button text (caption) preventing me from clicking the button. sometimes I had to move the cursor away and retry to click the button for many times.
    Please add the code block to the same page in the previous request and test the page with and without RTL.

    Thanks in Advance
    By the way you are the best ! Telerik
    Best Regards
  7. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Aug 2010 Link to this post

    Hello Bassel,

    Which version of RadControls for ASP.NET AJAX are you using? Do you have Flash installed? In Q1 2010 RadAsyncUpload rendering didn't use Flash and this particular scenario can be reproduced there as well as in RadUpload. The problem comes from the simultaneous usage of a more wide button, RTL and missing fake input element. Fortunately the fix is easy - set dir="ltr" to RadUpload, change its CssClass="ImgRadUpload RadUpload_rtl" and add direction="rtl" to only the button CSS rule:
    .ImgRadUpload input.ruBrowse
    {
       width: 115px;
       direction: rtl;
    }


    Kind regards,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  8. Eng.Bassel Samman
    Eng.Bassel Samman avatar
    25 posts
    Member since:
    Oct 2008

    Posted 11 Aug 2010 Link to this post

    Sorry, but the answer was not clear for me at least.
    Actually I am using Telerik ASP.net AJAX Version: 2010.1.415.35, and I am using RadAsyncUpload to upload an image as you do in Telerik Demos. I have Flash player installed.
    The steps of solution was not clear, I didn't understand where I should put set dir="ltr" ? I got the second step and update the CSS style but I still have the problem because I didn't complete the steps. So, could you please explain the solution first step?

    Thank you in Advanced
    Best Regards
  9. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 11 Aug 2010 Link to this post

    Hello Bassel,

    I'll try to be more descriptive. The reason why I'm asking about your version is that in Q2 2010 we introduced a Flash RadAsyncUpload mode that allows for multiple file selection and upload. The older version you are using is handling the select button as RadUpload and this particular scenario you are using is breaking it. The idea was to set dir="ltr" on the RadAsyncUpload itself and make only the select button rtl in order to show the text properly. The CssClass change is done to apply the RTL rendering regardless of the dir="ltr" direction set on it. After the changes your declaration should look like this:
    <telerik:RadAsyncUpload runat="server" ID="AsyncUpload1" MaxFileInputsCount="1" CssClass="ImgRadUpload RadUpload_rtl" dir="ltr"
    <Localization Select="اختيار صورة" /> 
    </telerik:RadAsyncUpload>

    Let me know if this works now.

    Sincerely yours,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. Eng.Bassel Samman
    Eng.Bassel Samman avatar
    25 posts
    Member since:
    Oct 2008

    Posted 12 Aug 2010 Link to this post

    Yes it is working perfectly
    Thank you very much
    Best Regards
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017