Remove all inline-styles on radDatePicker

[Mattias]

Hi,
There are so many inline-styles rendered so it's almost impossible to style it as I wish.
Is there some way to remove all the inline-styles and only use custom css classes?

[Dimo]

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.

[Mattias]

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:

<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

[Dimo]

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.

[Mattias]

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

[Dimo]

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.

[Mattias]

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?

[Dimo]

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.

[Mattias]

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!

[Sandeep]

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;

[Shinu]

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:

<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.