Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadDatePicker Padding

8 Answers 191 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Eng.Bassel Samman
Top achievements
Rank 2
Eng.Bassel Samman asked on 05 Aug 2010, 10:33 AM
How can I get rid of RadDatePicker padding.

8 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Aug 2010, 12:07 PM
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
0
Eng.Bassel Samman
Top achievements
Rank 2
answered on 09 Aug 2010, 02:12 PM
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>

 

 

 

 

 

 

 

 

 

0
Accepted
Dimo
Telerik team
answered on 10 Aug 2010, 01:23 PM
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
0
Eng.Bassel Samman
Top achievements
Rank 2
answered on 11 Aug 2010, 09:42 AM
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
0
Kamen Bundev
Telerik team
answered on 11 Aug 2010, 12:10 PM
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
0
Eng.Bassel Samman
Top achievements
Rank 2
answered on 11 Aug 2010, 12:56 PM
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
0
Accepted
Kamen Bundev
Telerik team
answered on 11 Aug 2010, 02:18 PM
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
0
Eng.Bassel Samman
Top achievements
Rank 2
answered on 12 Aug 2010, 09:12 AM
Yes it is working perfectly
Thank you very much
Best Regards
Tags
Calendar
Asked by
Eng.Bassel Samman
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Eng.Bassel Samman
Top achievements
Rank 2
Kamen Bundev
Telerik team
Share this question
or