Opened 12 years ago

Closed 10 years ago

#5244 closed defect (fixed)

dojo._abs() returns wrong x-value when body is in RTL direction (IE6)

Reported by: guest Owned by: Douglas Hays
Priority: high Milestone: 1.4
Component: HTML Version: 1.0
Keywords: bidi Cc: hwcdl@…
Blocked By: Blocking:

Description (last modified by James Burke)

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.

Change History (6)

comment:1 Changed 12 years ago by Adam Peller

Cc: hwcdl@… added
Keywords: bidi added

comment:2 Changed 12 years ago by Adam Peller

right... changing page direction at runtime is not supported. Doing the getComputedStyle is fairly expensive, so we compute the result a single time and cache it.

comment:3 Changed 12 years ago by bill

Component: CoreHTML
Owner: changed from anonymous to sjmiles

comment:4 Changed 12 years ago by dylan

Milestone: 1.4

comment:5 Changed 10 years ago by James Burke

Description: modified (diff)
Owner: changed from sjmiles to Douglas Hays

doughays, seems like this might be fixed with your latest changes to dojo._abs?

comment:6 Changed 10 years ago by Douglas Hays

Resolution: fixed
Status: newclosed

_abs (deprecated, public method position) problems with IE fixed by [20428] in Dojo 1.4.

Note: See TracTickets for help on using tickets.