Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Calendar > RadDatePicker rendering problem in IE9 Compatibility Mode

Answered RadDatePicker rendering problem in IE9 Compatibility Mode

Feed from this thread
  • Jasper avatar

    Posted on Feb 7, 2012 (permalink)

    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>
    Attached files

    Reply

  • Galin Galin admin's avatar

    Posted on Feb 10, 2012 (permalink)

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

    Reply

  • Jasper avatar

    Posted on Feb 13, 2012 (permalink)

    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
    Attached files

    Reply

  • Answer Galin Galin admin's avatar

    Posted on Feb 14, 2012 (permalink)

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

    Reply

  • Jasper avatar

    Posted on Feb 17, 2012 (permalink)

    Hello Galin,

    Thanks for the workaround! It works.

    Regards,
    Jasper

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Calendar > RadDatePicker rendering problem in IE9 Compatibility Mode
Related resources for "RadDatePicker rendering problem in IE9 Compatibility Mode"

[  ASP.NET Calendar Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]