RadDatePicker width 100% issue in IE9

9 posts, 0 answers
  1. Michael
    Michael avatar
    43 posts
    Member since:
    Dec 2010

    Posted 05 Jul 2012 Link to this post

    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>

  2. Michael
    Michael avatar
    43 posts
    Member since:
    Dec 2010

    Posted 09 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 10 Jul 2012 Link to this post

    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
    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.
  5. Michael
    Michael avatar
    52 posts
    Member since:
    Dec 2005

    Posted 10 Jul 2012 Link to this post

    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.
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 13 Jul 2012 Link to this post

    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:
    <!--[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.
  7. Michael
    Michael avatar
    43 posts
    Member since:
    Dec 2010

    Posted 13 Jul 2012 Link to this post

    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!
  8. Michael
    Michael avatar
    43 posts
    Member since:
    Dec 2010

    Posted 17 Jul 2012 Link to this post

    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).

    <div class="RadPicker RadPicker_Default" id="txtBirthDate_wrapper" style="width: 100px; display: inline; zoom: 1;">
  9. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 20 Jul 2012 Link to this post

    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
    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.
  10. Michael
    Michael avatar
    43 posts
    Member since:
    Dec 2010

    Posted 20 Jul 2012 Link to this post

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