RadDatePicker rendering problem in IE9 Compatibility Mode

13 posts, 1 answers
  1. Nick
    Nick avatar
    5 posts
    Member since:
    Oct 2010

    Posted 07 Feb 2012 Link to this post

    Hello team,

    I have two RadDatePicker that I'm showing next to eachother to pick a from and upon date.
    It displays always fine in Chrome, FireFox, IE8, IE9, except in IE9 Compatibility Mode (which has to be supported for our clients)

    In IE9 Compatibility Mode the boxes are shown like this:
    [RadDatePicker1 here]
    until
    [RadDatePicker2 here]

    While in any other browser and IE9 non Comp.Mode it shown like this (as I want):

    [RadDatePicker1 here]  until  [RadDatePicker2 here]

    (see attached screenshot for clarification)

    I tried wrapping all controls in a div with white-space:nowrap; and/or display:inline; but nothing seems to work.
    However, when I remove the following line, it works, but removing this line is not an option.
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

    Do you have any suggestions to make this work? Using Q3 2011 SP1 and Asp.Net 3.5
    Thanks in advance!

    Regards,
    Jasper

    My code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test2.aspx.cs" Inherits="Tests_Test2" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title></title>
    </head>
    <body>
      <form id="form1" runat="server">
        <asp:ScriptManager EnableScriptGlobalization="true" runat="server" ID="scriptManager" EnablePartialRendering="True" />
        <div>
          <telerik:RadDatePicker ID="RadDatePicker1" runat="server"
            MinDate="1900-01-01" MaxDate="2099-12-31" Width="110px">
            <DateInput ID="DateInput1" runat="server" DateFormat="dd-MM-yyyy" DisplayDateFormat="dd-MM-yyyy"></DateInput>
            <DatePopupButton ImageUrl="~/images/calendar.png" HoverImageUrl="~/images/calendar.png" />
          </telerik:RadDatePicker>
         
          until
           
          <telerik:RadDatePicker ID="RadDatePicker2" runat="server"
            MinDate="1900-01-01" MaxDate="2099-12-31" Width="110px">
            <DateInput ID="DateInput2" runat="server" DateFormat="dd-MM-yyyy" DisplayDateFormat="dd-MM-yyyy"></DateInput>
            <DatePopupButton ImageUrl="~/images/calendar.png" HoverImageUrl="~/images/calendar.png" />
          </telerik:RadDatePicker>
        </div>
      </form>
    </body>
    </html>
  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 10 Feb 2012 Link to this post

    Hello,

    I am afraid the issue you are facing is not replicable on our side. You can take a look at this screenshot for reference.

    Please let me know if you think I have missed something important.

    Additionally, in case the issue persists could you possibly send a small running project that we can use to reproduce the case.

    Alternatively a live URL will help us as well. This will help us provide better support.

    Regards,
    Galin
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick
    Nick avatar
    5 posts
    Member since:
    Oct 2010

    Posted 13 Feb 2012 Link to this post

    Hello Galin,

    I noticed in your screenshot that you're running IE9 in Document Mode: IE7 standards. If you run the page in IE9 standards you should be able to reproduce it.

    Also, I have a sample project in which you can also reproduce it, but I can only attach image files and our support license expired a month ago, so I can't send it to you.

    Steps to reproduce:
    1. Start the project in IE9 compatibiliy view
    2. The datepickers are as wide as the screen, and they will always appear underneath eachother
    3. Press F12 to open the analyser
    4. Switch to IE9 (NOT the comp.view)
    5. Everything looks OK now
    6. Also, in comp. view there's an extra white space underneath the datepickers (see also screenshot)

    Note: The version of Telerik I'm using is: 2011.3.1305.35

    I hope you can help me!

    Thanks,
    Jasper
  5. Answer
    Galin
    Admin
    Galin avatar
    526 posts

    Posted 14 Feb 2012 Link to this post

    Hello,

    Thank you for sending more information.

    The issue seems to be a browser bug. However, I have forwarded it to our developers. They will investigate the problem further.

    In the meantime, could you try to place the following CSS in the page header tag as a workaround
    <!--[if IE]>
    <style type="text/css">   
        .RadPicker{display: inline-block !important;}
        * + html .RadPicker{display: inline !important;}
        * html .RadPicker{display: inline !important;}
    </style>
    <![endif]-->

    I hope this helps.

    All the best,
    Galin
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Nick
    Nick avatar
    5 posts
    Member since:
    Oct 2010

    Posted 17 Feb 2012 Link to this post

    Hello Galin,

    Thanks for the workaround! It works.

    Regards,
    Jasper
  7. Amjad
    Amjad avatar
    36 posts
    Member since:
    Dec 2010

    Posted 03 Jul 2012 Link to this post

    Worked fine for me too thanks

    can you please explain to use whats the means of the style you just posted (just for knowledge)
  8. Sam Vanhoutte
    Sam Vanhoutte avatar
    7 posts
    Member since:
    Aug 2011

    Posted 17 Jul 2012 Link to this post

    also working here!

    thanks a lot
  9. Bill Dumansky
    Bill Dumansky avatar
    1 posts
    Member since:
    Feb 2009

    Posted 18 Jul 2012 Link to this post

    It works but this approach also disables  .set_visible(false) client side method
  10. Galin
    Admin
    Galin avatar
    526 posts

    Posted 23 Jul 2012 Link to this post

    Hi Bill,

    I agree, the provided workaround breaks the set_visible method. Therefore, I can suggest you to hide the parent element of the RadPicker, e.g.
    <%@ Page Language="C#" AutoEventWireup="true" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title>TestPage</title>
        <script type="text/javascript">
            function hidePicker() {
                $get("RadDatePickerWrapper").style.display = "none";
            }
     
            function showPicker() {
                $get("RadDatePickerWrapper").style.display = "";
            }
        </script>
     
        <!--[if IE]>
        <style type="text/css">   
            .RadPicker{display: inline-block !important;}
            * + html .RadPicker{display: inline !important;}
            * html .RadPicker{display: inline !important;}
        </style>
        <![endif]-->
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="scriptManager" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadButton ID="Button1" runat="server" OnClientClicked="hidePicker" Text="Hide picker"
            AutoPostBack="false" />
        <telerik:RadButton ID="Button2" runat="server" OnClientClicked="showPicker" Text="Show picker"
            AutoPostBack="false" />
        <br />
        <br />
        <div id="RadDatePickerWrapper">
            <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="110px">
            </telerik:RadDatePicker>
        </div>
        </form>
    </body>
    </html>

    I hope this helps.

    Regards,
    Galin
    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.
  11. OMAIR
    OMAIR avatar
    2 posts
    Member since:
    Oct 2012

    Posted 06 Nov 2012 Link to this post

    Thanx its working for me.....!
    Love u
  12. Galin
    Admin
    Galin avatar
    526 posts

    Posted 06 Nov 2012 Link to this post

    Hello,

    The issue is fixed and today a new internal build, which includes this fix, is uploaded. Could you please upgrade to it and let me know how it goes?

    Also, you can waiting for the next stable version - SP1, which will be released in the beginning of December.

    Kind regards,
    Galin
    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.
  13. Amrita
    Amrita avatar
    1 posts
    Member since:
    Oct 2014

    Posted 31 Oct 2014 Link to this post

    I am still facing this issue.

    I am on 2013.2.717.45 build
  14. Galin
    Admin
    Galin avatar
    526 posts

    Posted 04 Nov 2014 Link to this post

    Hi Amrita,

    I tested the issue with the mentioned version and it works as expected. Therefore could you please provide more information about the problems you are facing?

    Thank you for the cooperation.


    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017