Using the sample code below, the datepicker gets rendered with a span that has a style of "width: 100%; display: block;". Why does it not get a width of 100px? If I remove the meta tag that is forcing it to use the latest IE rendering engine, it works fine. Please help, thanks!
Telerik.Web.UI.dll version: 2012.2.607.40
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadDatePicker runat="server" ID="txtBirthDate" Width="100px" />
</div>
</form>
</body>
</html>
Telerik.Web.UI.dll version: 2012.2.607.40
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<telerik:RadDatePicker runat="server" ID="txtBirthDate" Width="100px" />
</div>
</form>
</body>
</html>
8 Answers, 1 is accepted
0
Michael
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2012, 01:12 PM
I thought this would be quick for someone to check out for me. I'm really trying to use Html5 in our app, but looks like I might have to resort to figuring out a hack to fix this, unless I'm just doing something wrong.
0
Hello Michael,
Set EnableSingleInputRendering="false" for the DateInput of your picker to avoid recalculation of the width of the input element of the picker.
The Picker renders table, and this table has width as what you have set. The first cell of the table has 100% width and the input element inside also has 100% width, to occupy all possible space that is left after the button is placed in the second cell.
All the best,
Vasil
the Telerik team
Set EnableSingleInputRendering="false" for the DateInput of your picker to avoid recalculation of the width of the input element of the picker.
The Picker renders table, and this table has width as what you have set. The first cell of the table has 100% width and the input element inside also has 100% width, to occupy all possible space that is left after the button is placed in the second cell.
All the best,
Vasil
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
Rank 1
answered on 10 Jul 2012, 05:49 PM
I don't understand what you mean by "to avoid recalculation of the width of the input element of the picker". If I set the DatePicker to be 100px for the Width property, shouldn't it just give it that width on the control's root element, instead of a width of "100%"? As I said, if I remove the meta tag from my example, it works just as I would expect. This seems like a bug to me. Also, I do want SingleInputMode... I just want it to work.
0
Hi Michael,
Yes it is a bug, but not in our control. The bug is in the IE browser. Setting the http-equiv attribute does not change the way we render our controls, however it changes the mode in which the Internet Explorer runs.
Try this work around:
And see this forum thread about he same issue:
http://www.telerik.com/community/forums/aspnet-ajax/calendar/raddatepicker-rendering-problem-in-ie9-compatibility-mode.aspx
Regards,
Vasil
the Telerik team
Yes it is a bug, but not in our control. The bug is in the IE browser. Setting the http-equiv attribute does not change the way we render our controls, however it changes the mode in which the Internet Explorer runs.
Try this work around:
<!--[if IE]><style type="text/css"> .RadPicker{display: inline-block !important;} * + html .RadPicker{display: inline !important;} * html .RadPicker{display: inline !important;}</style><![endif]-->And see this forum thread about he same issue:
http://www.telerik.com/community/forums/aspnet-ajax/calendar/raddatepicker-rendering-problem-in-ie9-compatibility-mode.aspx
Regards,
Vasil
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
Rank 1
answered on 13 Jul 2012, 02:30 PM
That link doesn't seem to work for me. Could you try it again? Your suggestion definitely does work. Is this something that can be worked into the next service pack for Q2 2012? Also, I'm concerned that there could be other RadControls that need a similar hack for the "IE9 standards" mode. Thanks!
0
Michael
Top achievements
Rank 1
Rank 1
answered on 17 Jul 2012, 01:55 PM
Whether you consider it a bug in your control or not, the fact remains that the default behavior of your control in the latest rendering engine of IE 9 is that it gets stretched to use the full available width of its container, and this is not what a developer would expect. I was wrong in that it DOES send the width in the markup for the root element (see below), but because of the CSS display (as you mentioned), it changes during rendering. I still believe that this is something you guys need to address. Could you please comment on that? Thanks!
Edit/note: This DOES work great in Chrome and Firefox, it is just IE 8 and 9 that are a problem, as you mentioned. Unfortunately, my company will have to support 8 and 9 for many years to come. I will use your CSS hack for now, but surely there is something you can do in the control itself.
Edit/note 2: Setting DateInput-EnableSingleInputRendering to False does not fix it in this case. Same for the other pickers (RadTimePicker and RadDateTimePicker).
Edit/note: This DOES work great in Chrome and Firefox, it is just IE 8 and 9 that are a problem, as you mentioned. Unfortunately, my company will have to support 8 and 9 for many years to come. I will use your CSS hack for now, but surely there is something you can do in the control itself.
Edit/note 2: Setting DateInput-EnableSingleInputRendering to False does not fix it in this case. Same for the other pickers (RadTimePicker and RadDateTimePicker).
<div class="RadPicker RadPicker_Default" id="txtBirthDate_wrapper" style="width: 100px; display: inline; zoom: 1;">0
Hi Michael,
Fixing the control itself will be possible only with embedding this css into the base css for the control. Our front end developers are working on this issue to find the bast way of solving it. If the found clear enough solution it will be embedded into the control's css.
Regards,
Vasil
the Telerik team
Fixing the control itself will be possible only with embedding this css into the base css for the control. Our front end developers are working on this issue to find the bast way of solving it. If the found clear enough solution it will be embedded into the control's css.
Regards,
Vasil
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Michael
Top achievements
Rank 1
Rank 1
answered on 20 Jul 2012, 01:33 PM
Great, thank you for the update on this. I'm sure you guys can figure out something for it. I will keep an eye on the future release notes, and hope it makes it in there.