Ticket #5244 (new defect)
dojo._abs() returns wrong x-value when body is in RTL direction (IE6)
| Reported by: | guest | Owned by: | sjmiles |
|---|---|---|---|
| Priority: | normal | Milestone: | 1.4 |
| Component: | HTML | Version: | 1.0 |
| Severity: | normal | Keywords: | bidi |
| Cc: | hwcdl@… |
Description
i found this bug in IE6. it might be that it dose not exist in other vesions of IE. anyway, FF seems to work fine.
the following is an example of an attempt to position a DIV over a TABLE:
<?xml version="1.0" encoding="windows-1255" ?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<script type="text/javascript" src="../dojo/dojo/dojo.js.uncompressed.js"></script>
<title>Insert title here</title>
<style >
TD{
color : red;
border : 2px solid blue;
}
</style>
</head>
<body dir="rtl">
<script type="text/javascript">
function toRTL_(){
document.body.dir='rtl';
dojo._bodyLtr = dojo.getComputedStyle(dojo.body()).direction == "ltr";
}
function toLTR_(){
document.body.dir='ltr';
dojo._bodyLtr = dojo.getComputedStyle(dojo.body()).direction == "ltr";
}
function func1(){
var e1 = document.getElementById("div1");
var e0 = document.getElementById("table1");
var dim1 = dojo._getMarginBox(e0);
var dim2 = dojo._abs(e0,true);
dojo._setBox(e1, dim2.x, dim2.y, dim1.w, dim1.h);
}
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br />
<br />
<input type="button" value="RTL" onclick="toRTL_()" />
<input type="button" value="LTR" onclick="toLTR_()" />
<input type="button" value="absolute position DIV on TABLE" onclick="func1();" />
<div dir="ltr" style="width: 400px; border: 1px solid blue;">bla bla bla bla bla bla bla bla bla</div>
<br />
<table id="table1">
<tbody>
<tr id="tr1">
<td>1----------</td>
<td>2----------</td>
<td>3----------</td>
</tr>
<tr id="tr2">
<td>4----------</td>
<td>5----------</td>
<td>6----------</td>
</tr>
</tbody>
</table>
<div id="div1" style="z-index:100; position:absolute; background-color: transparent; border: 1px solid lime;"> </div>
</body>
</html>
it looks like there are 2 problems. first i guess there is a problem in dojo._fixIeBiDiScrollLeft, at the following line:
return scrollLeft + de.clientWidth - de.scrollWidth;
replacment of "de.scrollWidth" with "16" (my scrollbar width) fix it:
return scrollLeft + de.clientWidth - 16;
but, there is still another problem, when we have horizontal scrollbar. it dose not take the horizontal offset into account.
BTW: dojo._isBodyLtr() assumes that the direction is never changed. i guess it has been done in such a way for performance reason... anyway, in the attached example, there are buttons to switch between RTL and LTR directions, so there is a workaround for this issue.
