Telerik Forums / UI for ASP.NET AJAX Forum / Calendar /

RadDatePicker Padding

Telerik UI for ASP.NET AJAX
Resources Buy Try

9 posts, 2 answers

Eng.Bassel Samman

25 posts

Member since:
Oct 2008

Posted 05 Aug 2010 Link to this post

How can I get rid of RadDatePicker padding.
Dimo
Admin

8486 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
Eng.Bassel Samman

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>
Answer
Dimo
Admin

8486 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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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
Eng.Bassel Samman

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
Kamen Bundev
Admin

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
Eng.Bassel Samman

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
Answer
Kamen Bundev
Admin

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
Eng.Bassel Samman

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

RadDatePicker Padding

Eng.Bassel Samman

Dimo

Eng.Bassel Samman

Dimo

Eng.Bassel Samman

Kamen Bundev

Eng.Bassel Samman

Kamen Bundev

Eng.Bassel Samman