Open Bug 520556 Opened 15 years ago Updated 3 years ago

contentEditable : table helper arrows are wrongly positioned

Categories

(Core :: DOM: Editor, defect, P5)

Product:
Core
Component:
DOM: Editor
Platform:
x86
All
Type:
defect

Tracking

()

People

(Reporter: jeroen.clarysse, Unassigned)

References

(
URL
)

Details

(Keywords: testcase)

Attachments

(3 files)

Wrongly positioned table controls at editable document
4.28 KB, image/png
Details
sample html files to reproduce the bug
528 bytes, application/zip
Details
testcase
454 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_1; en-us) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3

when changing an absolute positioned DIV to contenteditable, the helper-arrows for table editig have wrong offset (see URL : it is very obvous on a 5line page with only HTML, no javascript)

Reproducible: Always

Steps to Reproduce:
1.make a div, positioned relative
2.inside that, make a div, positioned absolute, set contentEditable to true on this one
3.make a table in the 2nd div
4. click a cell : the helper arrows appear at wrong coordinates
Actual Results:  
wrong cordinates

Expected Results:  
arrows at edge of the cell

reproduced on FFox Mac AND on fireFox win32
OS: Mac OS X → All
I've encountered the same issue, I guess. Tested with Firefox 3.5.5 under Windows XP SP3.

The given screenshot shows a editable document. If you insert a table element with the "insertHTML" execCommand with alignment set to "center" the table controls are shown at the wrong position.

If the table element is inserted with a left or right alignment everything works fine.
Same bug happens when create a table within a P tag within an Iframe, and enable contentEditable on the iframe.  If the Table is centered, or has margin style, the square-control-points are drawn at the wrong location (left-justified within the iframe).  We could not find any combination of style settings in the table to fix this.  See sample code attachment.
<html>
  <head>
    <script type="text/javascript">
      function go()
      {
        var c1 = document.getElementById( "composer1" );
        var d1 = c1.contentWindow.document;
        var b1 = d1.body;
        b1.innerHTML = '<p><table border="1" align="center"><tr><td>cell 1</td><td>cell 2</td></tr></table></p>';
        b1.contentEditable = true;
        
        var c2 = document.getElementById( "composer2" );
        var d2 = c2.contentWindow.document;
        var b2 = d2.body;
        b2.innerHTML = '<p><table border="1" style="margin: 10px 0px 0px 10px;"><tr><td>cell 1</td><td>cell 2</td></tr></table></p>';
        b2.contentEditable = true;
      }
    </script>
  </head>
  <body onload="go();">
    <b>Click on the Tables</b>
    <br/>
    <br/>

    Center Alignment
    <br/>
    <iframe id="composer1" style="overflow:auto; width:400px; height:200px;"></iframe>
    <br/>
    <br/>
    Margins
    <br/>
    <iframe id="composer2" style="overflow:auto; width:400px; height:200px;"></iframe>
  </body>

</html>
Unpack to any folder and open test.html in Firefox (e.g. 3.5.7), then click on the table. You should see the wrongly positioned table resizing controls.
Component: General → Editor
Keywords: testcase
QA Contact: general → editor
I have also experienced this bug and came here to log it but found it had already been logged. I produced my own test case:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<style type="text/css">
			.container {
				margin: 4em auto;
				position: relative; /* This statement throws off the positioning of the row/column edit controls */
				width: 500px;
			}
			table { width: 100%; }
			td, th { border: 1px solid black; padding: 1em; }
		</style>
	</head>
	<body>
		<div class="container" contenteditable="true">
			<table>
				<tr>
					<th>Test</th>
					<th>Test</th>
					<th>Test</th>
				</tr>
				<tr>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
				</tr>
				<tr>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
				</tr>
				<tr>
					<td>Test</td>
					<td>Test</td>
					<td>Test</td>
				</tr>
			</table>
		</div>
	</body>
</html>
I came across this today with our product where we switched to ckEditor.

The table helper is positioned several centimeters abowe the actual table.

I cannot supply a testcase as it is to deep in the product but I will add a screenshot.

In our case the contentEditable is within display:fixed.

It looks like FF positions the arrows as if the fixed elemen was absolute top 0, left 0.
Attached file testcase — 

    
  
Status: UNCONFIRMED → NEW
Ever confirmed: true

    
  
Version: unspecified → Trunk

    
    

    
  
Bulk-downgrade of unassigned, >=5 years untouched DOM/Storage bugs' priority.


If you have reason to believe this is wrong (especially for the severity), please write a comment and ni :jstutte.


Severity: normal → S4
Priority: -- → P5

          You need to log in
          before you can comment on or make changes to this bug.
        






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: