10 Answers, 1 is accepted
0
Hello Mattias,
All inline CSS styles used in RadDatePicker are actually not related to the control's look and feel. You should be able to fully control the appearance. The inline styles are applied to the invisible textboxes used for validation and storing of values. These textboxes are not skinnable anyway. A couple of inline styles are applied to the control's wrapper and these are related to the inline-block display, which is required.
Let us know what difficulties do you have in skinning RadDatePicker and we will provide further advice.
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
All inline CSS styles used in RadDatePicker are actually not related to the control's look and feel. You should be able to fully control the appearance. The inline styles are applied to the invisible textboxes used for validation and storing of values. These textboxes are not skinnable anyway. A couple of inline styles are applied to the control's wrapper and these are related to the inline-block display, which is required.
Let us know what difficulties do you have in skinning RadDatePicker and we will provide further advice.
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mattias
Top achievements
Rank 1
answered on 06 Oct 2008, 06:38 AM
Hi,
I did find after a while the properties: EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false".
But it did not help me much.
What I am trying to do is to align the textbox with a dropdownlist and make some space between textbox and calendar icon.
Code:
You can look at these images, the first is the current one, the second is how I want it to look.
http://www.svenskwebbhandel.se/date1.gif
http://www.svenskwebbhandel.se/date2.gif
I did find after a while the properties: EnableEmbeddedSkins="false" and EnableEmbeddedBaseStylesheet="false".
But it did not help me much.
What I am trying to do is to align the textbox with a dropdownlist and make some space between textbox and calendar icon.
Code:
<table> |
<tr> |
<td style="width:180px;"> |
Utförs av/under<br /> |
<asp:DropDownList ID="dropDownListUsers" runat="server" |
AppendDataBoundItems="true" Width="180"> |
<asp:ListItem Text="Välj användare/grupp" Value="00000000-0000-0000-0000-000000000000"></asp:ListItem> |
</asp:DropDownList> |
</td> |
<td style="width:180px;"> |
Område/Plats<br /> |
<asp:DropDownList ID="dropDownListPlaces" runat="server" |
AppendDataBoundItems="true" Width="180"> |
<asp:ListItem Text="Välj område/plats" Value="0"></asp:ListItem> |
</asp:DropDownList> |
</td> |
<td style="width:90px;">Start tidlina<br /> |
<telerik:RadDatePicker ID="radDatePickerStartDate" Runat="server" |
Culture="Swedish (Sweden)" Width="90px" > |
<DateInput runat="server" CssClass="radDatePicker" |
EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"> |
</DateInput> |
<Calendar runat="server" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" |
ViewSelectorText="x" CssClass="radDatePickerCalendar" EnableEmbeddedBaseStylesheet="false" Skin="Default"> |
</Calendar> |
</telerik:RadDatePicker> |
</td> |
<td style="width:220px;"><br /> |
<asp:Button ID="buttonFilter" runat="server" Text="Filtrera" |
onclick="buttonFilter_Click" UseSubmitBehavior="true" /> |
<asp:Button ID="buttonReport" runat="server" Text="Generera rapport" |
onclick="buttonReport_Click" UseSubmitBehavior="false" ToolTip="Gererera rapport av uppgifterna från tidlinan" /> |
</td> |
</tr> |
</table> |
You can look at these images, the first is the current one, the second is how I want it to look.
http://www.svenskwebbhandel.se/date1.gif
http://www.svenskwebbhandel.se/date2.gif
0
Accepted
Hi Mattias,
In order to insert some space between the textbox and the image button, please increase the right padding of the table cell, which contains the textbox. You should use the following CSS selector and a padding of your preference:
.pickerWrapper_Skin td.inputCell
{
padding: 0 5px 0 0;
}
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
In order to insert some space between the textbox and the image button, please increase the right padding of the table cell, which contains the textbox. You should use the following CSS selector and a padding of your preference:
.pickerWrapper_Skin td.inputCell
{
padding: 0 5px 0 0;
}
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mattias
Top achievements
Rank 1
answered on 06 Oct 2008, 07:35 AM
Is the calendar image set by absolute position or something?
I tried your code but the padding did not have any affect.
Then I tried to set background and that showed up!
So it seems that the image is displayed over the textbox! See link:
http://www.svenskwebbhandel.se/date3.gif
I tried your code but the padding did not have any affect.
Then I tried to set background and that showed up!
So it seems that the image is displayed over the textbox! See link:
http://www.svenskwebbhandel.se/date3.gif
0
Hi Mattias,
No, the popup image does not use any special kind of positioning. The requirements for skinning the datepicker, so that there is space between the textbox and the image are:
1. Add right padding to the table cell, which contains the textbox (as suggested in my previous post)
2. The right padding of the textbox itself should be zero and the right border should be 1px wide. If you want to have more textbox padding or thicker right border, then the right padding of the table cell should be increased further.
Please refer to the existing Telerik skins, where this works like you request. The non-embedded versions of our skins are located in the \Skins\ subfolder of your RadControls for ASP.NET AJAX installation folder.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
No, the popup image does not use any special kind of positioning. The requirements for skinning the datepicker, so that there is space between the textbox and the image are:
1. Add right padding to the table cell, which contains the textbox (as suggested in my previous post)
2. The right padding of the textbox itself should be zero and the right border should be 1px wide. If you want to have more textbox padding or thicker right border, then the right padding of the table cell should be increased further.
Please refer to the existing Telerik skins, where this works like you request. The non-embedded versions of our skins are located in the \Skins\ subfolder of your RadControls for ASP.NET AJAX installation folder.
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mattias
Top achievements
Rank 1
answered on 08 Oct 2008, 07:36 AM
It seems that the problem is because of style="width:100%;" on the textbox.
If I remove it (on a html testpage) I got the padding.
Is it possible to remove this tag?
If I remove it (on a html testpage) I got the padding.
Is it possible to remove this tag?
0
Hi Mattias,
Unfortunately it is not possible to remove this style, because the textbox width will not be consistent the control's width and people expect to set width to the control, not the textbox.
However, as I said, you can have space between the textbox and the image if you follow the guidelines in my previous posts. All embedded Telerik skins have the space that you require, so it is achievable.
If you need further assistance, please copy-paste your custom skin CSS and I will give you advice exactly what to change.
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Unfortunately it is not possible to remove this style, because the textbox width will not be consistent the control's width and people expect to set width to the control, not the textbox.
However, as I said, you can have space between the textbox and the image if you follow the guidelines in my previous posts. All embedded Telerik skins have the space that you require, so it is achievable.
If you need further assistance, please copy-paste your custom skin CSS and I will give you advice exactly what to change.
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Mattias
Top achievements
Rank 1
answered on 08 Oct 2008, 08:20 AM
Hi Dimo,
I've got it to work now! :)
I think the problem was that I set to small right padding, just 2px, it did not show any padding then.
When I increase the padding to 6px I see the gap!
It must be something with border-collapse on the table that made 2px to small to see (on IE 7).
Thanx again Dimo!
I've got it to work now! :)
I think the problem was that I set to small right padding, just 2px, it did not show any padding then.
When I increase the padding to 6px I see the gap!
It must be something with border-collapse on the table that made 2px to small to see (on IE 7).
Thanx again Dimo!
0
Sandeep
Top achievements
Rank 1
answered on 06 Sep 2013, 10:39 AM
Hi,
After selecting date in Rad calendar, the calendar wrapper div create following inline style. But due to postion absolute my page UI is distrubing . I want to override this style into position fixed. Can you please suggest a way to overried this inline style.
<div id="ctl00_ContentPlaceHolder1_txtEndDate_calendar_wrapper" style="visibility: hidden; position: absolute; left: -1000px;
After selecting date in Rad calendar, the calendar wrapper div create following inline style. But due to postion absolute my page UI is distrubing . I want to override this style into position fixed. Can you please suggest a way to overried this inline style.
<div id="ctl00_ContentPlaceHolder1_txtEndDate_calendar_wrapper" style="visibility: hidden; position: absolute; left: -1000px;
0
Shinu
Top achievements
Rank 2
answered on 31 Dec 2013, 09:33 AM
Hi Sandeep,
I guess you want to customize the CSS for a RadCalendar. You can set the CssClass for the RadCalendar. Please have a look into the sample code which works fine at my end.
ASPX:
CSS:
Please elaborate your requirement if it doesn't help.
Thanks,
Shinu.
I guess you want to customize the CSS for a RadCalendar. You can set the CssClass for the RadCalendar. Please have a look into the sample code which works fine at my end.
ASPX:
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"ContentPlaceHolder1"
runat
=
"Server"
>
<
telerik:RadCalendar
ID
=
"RadCalendar1"
runat
=
"server"
CssClass
=
"demo"
>
</
telerik:RadCalendar
>
</
asp:Content
>
CSS:
<style type=
"text/css"
>
.demo
{
position
:
fixed
!important
;
}
</style>
Please elaborate your requirement if it doesn't help.
Thanks,
Shinu.