This is a migrated thread and some comments may be shown as answers.

RadDatePicker rendering problem in IE9 Compatibility Mode

12 Answers 257 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 07 Feb 2012, 11:58 AM
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>

12 Answers, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 10 Feb 2012, 02:21 PM
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 >>
0
Nick
Top achievements
Rank 1
answered on 13 Feb 2012, 11:51 AM
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
0
Accepted
Galin
Telerik team
answered on 14 Feb 2012, 04:30 PM
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 >>
0
Nick
Top achievements
Rank 1
answered on 17 Feb 2012, 10:53 AM
Hello Galin,

Thanks for the workaround! It works.

Regards,
Jasper
0
Amjad
Top achievements
Rank 1
answered on 03 Jul 2012, 03:47 PM
Worked fine for me too thanks

can you please explain to use whats the means of the style you just posted (just for knowledge)
0
Sam Vanhoutte
Top achievements
Rank 1
answered on 17 Jul 2012, 08:25 AM
also working here!

thanks a lot
0
Bill Dumansky
Top achievements
Rank 1
answered on 18 Jul 2012, 09:20 PM
It works but this approach also disables  .set_visible(false) client side method
0
Galin
Telerik team
answered on 23 Jul 2012, 02:01 PM
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.
0
OMAIR
Top achievements
Rank 1
answered on 06 Nov 2012, 09:50 AM
Thanx its working for me.....!
Love u
0
Galin
Telerik team
answered on 06 Nov 2012, 12:28 PM
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.
0
Amrita
Top achievements
Rank 1
answered on 31 Oct 2014, 06:41 AM
I am still facing this issue.

I am on 2013.2.717.45 build
0
Galin
Telerik team
answered on 04 Nov 2014, 03:09 PM
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.

 
Tags
Calendar
Asked by
Nick
Top achievements
Rank 1
Answers by
Galin
Telerik team
Nick
Top achievements
Rank 1
Amjad
Top achievements
Rank 1
Sam Vanhoutte
Top achievements
Rank 1
Bill Dumansky
Top achievements
Rank 1
OMAIR
Top achievements
Rank 1
Amrita
Top achievements
Rank 1
Share this question
or