Hello,
I’m attaching an example where I see some strange behavior with a couple
tags within a when the cell separator is clicked in a 3U layout. This only appears to be happening with IE8 in Compatibility mode and not with Firefox 3.5.
To reproduce, click on the separator between the “a” cell and the “c” cell. The two
tags disappear. Click again and you can see these appear then disappear again. This does not appear to be occuring with a resize operation using the sizing border between cell “a” and “c”. Here’s a stripped-down JSP:
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="../../../common/skins/yds/coreStyle.css">
<link rel="stylesheet" type="text/css" href="../../../common/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.css">
<link rel="stylesheet" type="text/css" href="../../../common/dhtmlx/dhtmlxLayout/codebase/skins/dhtmlxlayout_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../common/dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.css">
<link rel="stylesheet" type="text/css" href="../../../common/dhtmlx/dhtmlxWindows/codebase/skins/dhtmlxwindows_dhx_skyblue.css">
<link rel="stylesheet" type="text/css" href="../../../common/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcalendar.css">
<link rel="stylesheet" type="text/css" href="../../../common/dhtmlx/dhtmlxCalendar/codebase/skins/dhtmlxcalendar_vista.css">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
</style>
<script src="../../../common/dhtmlx/dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script src="../../../common/dhtmlx/dhtmlxLayout/codebase/dhtmlxlayout.js"></script>
<script src="../../../common/dhtmlx/dhtmlxLayout/codebase/dhtmlxcontainer.js"></script>
<script src="../../../common/dhtmlx/dhtmlxWindows/codebase/dhtmlxwindows.js"></script>
<script src="../../../common/dhtmlx/dhtmlxCalendar/codebase/dhtmlxcalendar.js"></script>
<script>
function doOnLoad () {
var layout = new dhtmlXLayoutObject(document.body,"3U");
layout.cells("a").setHeight(150);
layout.cells("a").showHeader();
layout.cells("a").attachObject("leftPanel");
layout.cells("b").showHeader ();
layout.cells("b").attachObject("rightPanel");
layout.cells("c").hideHeader();
layout.cells("c").attachObject("problemDescription");
//layout.cells("c").setHeight(500);
cal1 = new dhtmlxCalendarObject('calendar1');
}
function showCalendar(k) {
document.getElementById('calendar'+k).style.display = 'block';
}
</script>
</head>
<body onload="doOnLoad();" width="100%">
<div id="calendar1" style="position:absolute; left:50px; top:0px; display:none">
</div>
<div id="calendar2" style="position:absolute; left:50px; top:0px; display:none">
</div>
<div id="rightPanel"></div>
<div id="problemDescription">
<table width="100%" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
<div id="leftPanel" style="position: relative; top: 5px; left: 5px;">
<table style="border-collapse: collapse; font-size: x-small; width:100%;">
<tr>
<td colspan="2"> </td>
<td >From</td>
<td >To</td>
</tr>
<tr>
<td><input id="agedRadio" type="radio" name="dateFilterChoice" checked="checked"/></td>
<td>Age (days)</td>
<td>
<input id="agedFrom" type="text" size="3" maxlength="3" style="border:1px solid navy;"/>
</td>
<td>
<input id="agedTo" type="text" size="3" maxlength="3" style="border:1px solid navy;" />
</td>
</tr>
<tr>
<td colspan="4">
<hr noshade="noshade" border="1px solid navy;" width="91%"/>
</td>
</tr>
<tr>
<td>
<input id="dateRadio" type="radio" name="dateFilterChoice"/>
</td>
<td nowrap id="dhtmlxExample"><b>Dates: </b></td>
<td>
<div style="position:relative; border:1px solid navy; width: 110px">
<input type="text" id="calInput1"
style="border-width:0px; width: 69px; font-size:12px;"
readonly="true">
<img style="cursor:pointer;" onClick="showCalendar(1)"
src="../../../common/dhtmlx/dhtmlxCalendar/codebase/imgs/calendar.gif"
align="absmiddle"></img>
</div>
</td>
<td>
<div style="position:relative; border:1px solid navy; width: 110px">
<input type="text" id="calInput1"
style="border-width:0px; width: 69px; font-size:12px;"
readonly="true">
<img style="cursor:pointer;"
src="../../../common/dhtmlx/dhtmlxCalendar/codebase/imgs/calendar.gif"
align="absmiddle"></img>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>