Remove all inline-styles on radDatePicker

11 posts, 1 answers
  1. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 04 Oct 2008 Link to this post

    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?
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 05 Oct 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 06 Oct 2008 Link to this post

    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
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Oct 2008 Link to this post

    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.
  6. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 06 Oct 2008 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Oct 2008 Link to this post

    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.
  8. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 08 Oct 2008 Link to this post

    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?


  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Oct 2008 Link to this post

    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.
  10. Mattias
    Mattias avatar
    263 posts
    Member since:
    Aug 2012

    Posted 08 Oct 2008 Link to this post

    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!
  11. Sandeep
    Sandeep avatar
    5 posts
    Member since:
    Sep 2013

    Posted 06 Sep 2013 Link to this post

    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;
  12. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 31 Dec 2013 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017