2009 Q3 DatePicker width

3 posts, 0 answers
  1. Deniz Torlak
    Deniz Torlak avatar
    2 posts
    Member since:
    Dec 2009

    Posted 18 Dec 2009 Link to this post

    Hi,

    I am having problem setting the datepicker's width via css. I am disabling the embedded skin and style, yet I cannot change the with of the div from 150px to something else. what ever I write in css it adds the 150px inline and overwrites me.

    I want to use the skin as a base style but I want to be able to change the width of the datepicker in different pages using the site's global css file.

    help please?

    This is how I set the tag:
    ----------------------------------
           
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            </telerik:RadScriptManager> 
            <telerik:RadDatePicker EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false"    
                ID="RadDatePicker1" runat="server"
            </telerik:RadDatePicker> 


    This is the html output I get:
    ----------------------------------

    <div style="display: -moz-inline-stack; width: 150px; height: 20px;" class="RadPicker RadPicker_Default " id="RadDatePicker1_wrapper"
        <!-- 2009.3.1103.35 --><input type="text" value="" class="rdfd_" name="RadDatePicker1" id="RadDatePicker1" style="border: 0pt none ; margin: 0pt 0pt -1px; padding: 0pt; overflow: hidden; visibility: hidden; display: block; float: right; width: 1px; height: 1px;"/><table cellspacing="0" style="width: 150px;" class="rcTable"
            <tbody><tr
                <td style="width: 100%;" class="rcInputCell"><span style="display: block;" class="RadInput RadInput_Default" id="RadDatePicker1_dateInput_wrapper"><input type="text" style="width: 100%;" class="riTextBox riEnabled" name="RadDatePicker1_dateInput_text" id="RadDatePicker1_dateInput_text"/><input type="text" value="" class="rdfd_" name="RadDatePicker1$dateInput" id="RadDatePicker1_dateInput" style="border: 0pt none ; margin: -18px 0pt 0pt; padding: 0pt; overflow: hidden; visibility: hidden; float: right; width: 1px; height: 1px;"/><input type="hidden" name="RadDatePicker1_dateInput_ClientState" id="RadDatePicker1_dateInput_ClientState" autocomplete="off"/></span></td><td><a class="rcCalPopup" id="RadDatePicker1_popupButton" href="#" title="Open the calendar popup.">Open the calendar popup.</a><div style="display: none;" id="RadDatePicker1_calendar_wrapper"><table cellspacing="0" border="0" class="RadCalendar RadCalendar_Default" summary="Calendar" id="RadDatePicker1_calendar"
                    <thead> 
                        <tr> 
                            <td class="rcTitlebar"><table cellspacing="0" border="0" summary="title and navigation"
                                <tbody><tr
                                    <td><a href="#" title="<<" class="rcFastPrev" id="RadDatePicker1_calendar_FNP"><<</a></td><td><a href="#" title="<" class="rcPrev" id="RadDatePicker1_calendar_NP"><</a></td><td class="rcTitle" id="RadDatePicker1_calendar_Title">December 2009</td><td><href="#" title=">" class="rcNext" id="RadDatePicker1_calendar_NN">></a></td><td><href="#" title=">>" class="rcFastNext" id="RadDatePicker1_calendar_FNN">>></a></td
                                </tr> 
                            </tbody></table></td> 
                        </tr> 
                    </thead><tbody
        <tr> 
            <td class="rcMain"><table cellspacing="0" border="0" summary="December 2009" class="rcMainTable" id="RadDatePicker1_calendar_Top"
        <thead> 
            <tr class="rcWeek"
                <th class="rcViewSel"</th><th scope="col" abbr="Sun" title="Sunday" id="RadDatePicker1_calendar_Top_cs_1">S</th><th scope="col" abbr="Mon" title="Monday" id="RadDatePicker1_calendar_Top_cs_2">M</th><th scope="col" abbr="Tue" title="Tuesday" id="RadDatePicker1_calendar_Top_cs_3">T</th><th scope="col" abbr="Wed" title="Wednesday" id="RadDatePicker1_calendar_Top_cs_4">W</th><th scope="col" abbr="Thu" title="Thursday" id="RadDatePicker1_calendar_Top_cs_5">T</th><th scope="col" abbr="Fri" title="Friday" id="RadDatePicker1_calendar_Top_cs_6">F</th><th scope="col" abbr="Sat" title="Saturday" id="RadDatePicker1_calendar_Top_cs_7">S</th> 
            </tr> 
        </thead><tbody
            <tr class="rcRow"
                <th scope="row" id="RadDatePicker1_calendar_Top_rs_1">49</th><td title="Sunday, November 29, 2009" class="rcOtherMonth"><href="#">29</a></td><td title="Monday, November 30, 2009" class="rcOtherMonth"><href="#">30</a></td><td title="Tuesday, December 01, 2009"><href="#">1</a></td><td title="Wednesday, December 02, 2009"><href="#">2</a></td><td title="Thursday, December 03, 2009"><href="#">3</a></td><td title="Friday, December 04, 2009"><href="#">4</a></td><td title="Saturday, December 05, 2009" class="rcWeekend"><href="#">5</a></td
            </tr><tr class="rcRow"
                <th scope="row" id="RadDatePicker1_calendar_Top_rs_2">50</th><td title="Sunday, December 06, 2009" class="rcWeekend"><href="#">6</a></td><td title="Monday, December 07, 2009"><href="#">7</a></td><td title="Tuesday, December 08, 2009"><href="#">8</a></td><td title="Wednesday, December 09, 2009"><href="#">9</a></td><td title="Thursday, December 10, 2009"><href="#">10</a></td><td title="Friday, December 11, 2009"><href="#">11</a></td><td title="Saturday, December 12, 2009" class="rcWeekend"><href="#">12</a></td
            </tr><tr class="rcRow"
                <th scope="row" id="RadDatePicker1_calendar_Top_rs_3">51</th><td title="Sunday, December 13, 2009" class="rcWeekend"><href="#">13</a></td><td title="Monday, December 14, 2009"><href="#">14</a></td><td title="Tuesday, December 15, 2009"><href="#">15</a></td><td title="Wednesday, December 16, 2009"><href="#">16</a></td><td title="Thursday, December 17, 2009"><href="#">17</a></td><td title="Friday, December 18, 2009"><href="#">18</a></td><td title="Saturday, December 19, 2009" class="rcWeekend"><href="#">19</a></td
            </tr><tr class="rcRow"
                <th scope="row" id="RadDatePicker1_calendar_Top_rs_4">52</th><td title="Sunday, December 20, 2009" class="rcWeekend"><href="#">20</a></td><td title="Monday, December 21, 2009"><href="#">21</a></td><td title="Tuesday, December 22, 2009"><href="#">22</a></td><td title="Wednesday, December 23, 2009"><href="#">23</a></td><td title="Thursday, December 24, 2009"><href="#">24</a></td><td title="Friday, December 25, 2009"><href="#">25</a></td><td title="Saturday, December 26, 2009" class="rcWeekend"><href="#">26</a></td
            </tr><tr class="rcRow"
                <th scope="row" id="RadDatePicker1_calendar_Top_rs_5">1</th><td title="Sunday, December 27, 2009" class="rcWeekend"><href="#">27</a></td><td title="Monday, December 28, 2009"><href="#">28</a></td><td title="Tuesday, December 29, 2009"><href="#">29</a></td><td title="Wednesday, December 30, 2009"><href="#">30</a></td><td title="Thursday, December 31, 2009"><href="#">31</a></td><td title="Friday, January 01, 2010" class="rcOtherMonth"><href="#">1</a></td><td title="Saturday, January 02, 2010" class="rcOtherMonth"><href="#">2</a></td
            </tr><tr class="rcRow"
                <th scope="row" id="RadDatePicker1_calendar_Top_rs_6">2</th><td title="Sunday, January 03, 2010" class="rcOtherMonth"><href="#">3</a></td><td title="Monday, January 04, 2010" class="rcOtherMonth"><href="#">4</a></td><td title="Tuesday, January 05, 2010" class="rcOtherMonth"><href="#">5</a></td><td title="Wednesday, January 06, 2010" class="rcOtherMonth"><href="#">6</a></td><td title="Thursday, January 07, 2010" class="rcOtherMonth"><href="#">7</a></td><td title="Friday, January 08, 2010" class="rcOtherMonth"><href="#">8</a></td><td title="Saturday, January 09, 2010" class="rcOtherMonth"><href="#">9</a></td
            </tr> 
        </tbody> 
    </table></td
        </tr> 
    </tbody> 
                </table><input type="hidden" value="[]" id="RadDatePicker1_calendar_SD" name="RadDatePicker1_calendar_SD"/><input type="hidden" value="[[1980,1,1],[2099,12,30],[2009,12,18]]" id="RadDatePicker1_calendar_AD" name="RadDatePicker1_calendar_AD"/></div></td
            </tr> 
        </tbody></table><input type="hidden" name="RadDatePicker1_ClientState" id="RadDatePicker1_ClientState" autocomplete="off"/> 
    </div> 
  2. Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 18 Dec 2009 Link to this post

    Hello Deniz,

    Use the following approach:

    ASPX

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" CssClass="MyPicker200" />

    CSS

    .MyPicker200 ,
    .MyPicker200  .rcTable
    {
        width: 200px  !important ;
    }


    Actually, setting a custom CSS class to the date picker is not required, you can also use the control's native RadPicker CSS class:

    .RadPicker ,
    .RadPicker  .rcTable
    {
        width: 200px  !important ;
    }


    Best wishes,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. Deniz Torlak
    Deniz Torlak avatar
    2 posts
    Member since:
    Dec 2009

    Posted 18 Dec 2009 Link to this post

    All good, thanks. this solves the problem.

    cheers
    .deniz
Back to Top