Deniz Torlak
Top achievements
Rank 1
Rank 1
Deniz Torlak
asked on 18 Dec 2009, 02:48 PM
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:
----------------------------------
This is the html output I get:
----------------------------------
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><a href="#" title=">" class="rcNext" id="RadDatePicker1_calendar_NN">></a></td><td><a 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"><a href="#">29</a></td><td title="Monday, November 30, 2009" class="rcOtherMonth"><a href="#">30</a></td><td title="Tuesday, December 01, 2009"><a href="#">1</a></td><td title="Wednesday, December 02, 2009"><a href="#">2</a></td><td title="Thursday, December 03, 2009"><a href="#">3</a></td><td title="Friday, December 04, 2009"><a href="#">4</a></td><td title="Saturday, December 05, 2009" class="rcWeekend"><a 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"><a href="#">6</a></td><td title="Monday, December 07, 2009"><a href="#">7</a></td><td title="Tuesday, December 08, 2009"><a href="#">8</a></td><td title="Wednesday, December 09, 2009"><a href="#">9</a></td><td title="Thursday, December 10, 2009"><a href="#">10</a></td><td title="Friday, December 11, 2009"><a href="#">11</a></td><td title="Saturday, December 12, 2009" class="rcWeekend"><a 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"><a href="#">13</a></td><td title="Monday, December 14, 2009"><a href="#">14</a></td><td title="Tuesday, December 15, 2009"><a href="#">15</a></td><td title="Wednesday, December 16, 2009"><a href="#">16</a></td><td title="Thursday, December 17, 2009"><a href="#">17</a></td><td title="Friday, December 18, 2009"><a href="#">18</a></td><td title="Saturday, December 19, 2009" class="rcWeekend"><a 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"><a href="#">20</a></td><td title="Monday, December 21, 2009"><a href="#">21</a></td><td title="Tuesday, December 22, 2009"><a href="#">22</a></td><td title="Wednesday, December 23, 2009"><a href="#">23</a></td><td title="Thursday, December 24, 2009"><a href="#">24</a></td><td title="Friday, December 25, 2009"><a href="#">25</a></td><td title="Saturday, December 26, 2009" class="rcWeekend"><a 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"><a href="#">27</a></td><td title="Monday, December 28, 2009"><a href="#">28</a></td><td title="Tuesday, December 29, 2009"><a href="#">29</a></td><td title="Wednesday, December 30, 2009"><a href="#">30</a></td><td title="Thursday, December 31, 2009"><a href="#">31</a></td><td title="Friday, January 01, 2010" class="rcOtherMonth"><a href="#">1</a></td><td title="Saturday, January 02, 2010" class="rcOtherMonth"><a 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"><a href="#">3</a></td><td title="Monday, January 04, 2010" class="rcOtherMonth"><a href="#">4</a></td><td title="Tuesday, January 05, 2010" class="rcOtherMonth"><a href="#">5</a></td><td title="Wednesday, January 06, 2010" class="rcOtherMonth"><a href="#">6</a></td><td title="Thursday, January 07, 2010" class="rcOtherMonth"><a href="#">7</a></td><td title="Friday, January 08, 2010" class="rcOtherMonth"><a href="#">8</a></td><td title="Saturday, January 09, 2010" class="rcOtherMonth"><a 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 Answers, 1 is accepted
0
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.
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.
0
Deniz Torlak
Top achievements
Rank 1
Rank 1
answered on 18 Dec 2009, 03:07 PM
All good, thanks. this solves the problem.
cheers
.deniz
cheers
.deniz