[Dojo-checkins] [dojo] #5244: dojo._abs() returns wrong x-value when body is in RTL direction (IE6)

Tue Nov 27 09:25:22 UTC 2007

#5244: dojo._abs() returns wrong x-value when body is in RTL direction (IE6)
--------------------+-------------------------------------------------------
 Reporter:  guest   |       Owner:  anonymous
     Type:  defect  |      Status:  new      
 Priority:  normal  |   Milestone:           
Component:  Core    |     Version:  1.0      
 Severity:  normal  |    Keywords:           
--------------------+-------------------------------------------------------
 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.

-- 
Ticket URL: <http://trac.dojotoolkit.org/ticket/5244>
dojo <http://dojotoolkit.org/>
The Dojo UI Toolkit