I have a <div> container set up as follows:
<
div class="Logs_Filter_Date_Container" style="width: 15%;">
<div class="Logs_Filter_Date_Text" style="width: 40%;">
<span><asp:Literal ID="lblStartDate" runat="server"></asp:Literal></span></div>
<div class="Logs_Filter_Date_Combo_Container" style="width: 58%;">
<ig:WebDatePicker ID="clndrStartDate" DropDownCalendarID="StartDate_WebMonthCalendar"
runat="server" Width="100%"><ClientSideEvents KeyDown="NotificationLog_calendarKeyDown" TextChanged="NotificationLog_filterChanged" />
</ig:WebDatePicker>
<ig:WebMonthCalendar ID="StartDate_WebMonthCalendar" runat="server"></ig:WebMonthCalendar></div></div>
Note the width setting on the clndrStartDate = 100%. I would expect that the control would 100% of its containing <div> which was set to 58%. However upon inspecting the control using both firebug for firefox and developertools for IE, the <table> that contains the WebDatePicker is set to 100px via an inline setting. To work around this problem I used the Logs_Filter_Date_Container CSS class to get to the table (which is essentially the WebDatePicker) and override its width as 100%:
.Logs_Filter_Date_Combo_Container
> table
{
}
My question is why the width attribute of the WebDatePicker is ignored and set to 100px inline?
Hi Chris,
If server property Width is not set, then default value of 100px is used. Otherwise, it is hard to calculate and adjust bounds of inner html elements (INPUT, TD, etc.) used by editor.
You may try to override width in your css class by "width:yourvalue !important;". However, if it will trigger side effects, then that should not be used.
Viktor,
My apologies. It dawned on me a few minutes ago that I have skinned the WebDatePicker Control. I looked at the .skin file and sure enough the control has its width set to 100px- which by design overrides anything I set style-wise.
Thanks!
I copied your codes to a website sample, ran and looked at generated html. For editor-table it appeared as following:
<table title="{0}" id="clndrStartDate" class="igte_EditWithButtons" cellspacing="0" cellpadding="0" border="0" style="width:100%;"> <tr> <td ... /></td> </tr></table>
I also tried to resize browser and width of editor was resized accordingly to comply with width:15% and width:40% of its containers.
My aspx looked like below. If I remove WebDatePicker and WebMonthCalendar, then width of their container div (blue rectangle with red borders) had exactly same height as with WebDatePicker.
If that sample is missing something or not correct, then please attach a simple sample (aspx) within Options tab which can be used to reproduce that issue.
<form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="Logs_Filter_Date_Container" style="background:yellow;border:1px solid blue;width: 50%;"><div class="Logs_Filter_Date_Text" style="background:orange;border:1px solid black;width: 40%;"><span><asp:Literal ID="lblStartDate" runat="server"></asp:Literal></span></div><div class="Logs_Filter_Date_Combo_Container" style="background:blue;border:1px solid red;width: 58%;">
<ig:WebDatePicker ID="clndrStartDate" DropDownCalendarID="StartDate_WebMonthCalendar" runat="server" Width="100%"></ig:WebDatePicker> <ig:WebMonthCalendar ID="StartDate_WebMonthCalendar" runat="server"></ig:WebMonthCalendar>
</div></div></form>