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

RadDatePicker rendering problem in IE9 Compatibility Mode

12 Answers 322 Views

Calendar

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

Nick asked on 07 Feb 2012, 11:58 AM

datepicker-ie9.png

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

answered on 13 Feb 2012, 11:51 AM

screenshot.png

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

Accepted

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



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

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

<html xmlns="http://www.w3.org/1999/xhtml">

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

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadDatePicker rendering problem in IE9 Compatibility Mode

12 Answers, 1 is accepted