Closed Bug 129375 Opened 22 years ago Closed 20 years ago

absolutely position div within another absolutely positioned div has a zero offsetWidth property

Categories

(Core :: Layout: Positioned, defect, P3)

Product:
Core
Component:
Layout: Positioned
Platform:
x86
All
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
Future

People

(Reporter: doug_anderson, Assigned: MatsPalmgren_bugz)

References

Details

(Keywords: testcase)

Attachments

(2 files, 1 obsolete file)

Fixed strange error
1.93 KB, text/html
Details
Test Case with Borders
1.99 KB, text/html
Details 
From Bugzilla Helper:
User-Agent: Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0)
BuildID:    Gecko/20020204

<html>
<head>
<title>NS6 offsetWidth Bug</title>
<script>
<!--
function Init()
{
	var div0 = document.getElementById("div0");
	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");

	alert("div0.offsetWidth=" + div0.offsetWidth + " \n(a single positioned 
<div> is non-zero as expected)");
	alert("div1.offsetWidth=" + div1.offsetWidth + " \n(a position <div> 
within another positioned <div> should not have zero width)");
	alert("div1.offsetHeight=" + div1.offsetHeight + " \n(a position <div> 
within another positioned <div> returns a valid offsetHeight)");
	alert("div2.offsetWidth=" + div2.offsetWidth + " \n(a third non-
positioned <div> fixes the problem)");
}

//-->
</script>
<style>
.absS { position: absolute; left: 0px; top: 0px; }
	#discussion { position: absolute; left: 10px; top: 120px; font-family: 
sans-serif; }
</style>
</head>

<body bgcolor="#ffffff" onLoad="Init()">

<div id="div0" class="absS">A simple div within a div</div>

<div class="absS" style="top: 40px"><div id="div1" class="absS">A second div 
within a div</div></div>

<div class="absS" style="top: 80px"><div class="absS"><div id="div2">A third 
div within a div</div></div></div>

<div id="discussion"
><b>Problem:</b><br>
If an absolutely positioned &lt;div&gt; is placed within another absolutely 
positioned &lt;div&gt;,
the inner &lt;div&gt; always returns zero for the &quot;offsetWidth&quot; and 
&quot;scrollWidth&quot; properties.
While the inner &lt;div&gt; should be taken out of the flow and not contribute 
to the outer &lt;div&gt;'s size,
the inner &lt;div&gt; itself should still have a height and width.  It might be 
worth noting that the
vertical counterparts &quot;offsetHeight&quot; and &quot;scrollHeight&quot; do 
correctly return valid
values on the inner &lt;div&gt;</div>

</body>

</html>



Reproducible: Always
Steps to Reproduce:
1.Run the example included in the description
2.
3.
Component: Browser-General → Layout
Summary: An absolutely position div within another absolutely positioned div has a zero offsetWidth property → absolutely position div within another absolutely positioned div has a zero offsetWidth property
Attached file Testcase (obsolete) — 

    
    

    
  

      
      
      
      

        Attached file
          
        Fixed strange error
        — 
      

    


  

        Attachment #89715 -
        Attachment is obsolete: true

    
    

    
  
->DOM Style. may be related to bug 99314.
Assignee: asa → attinasi
Keywords: testcase
QA Contact: doron → petersen

    
    

    
  
Confirming in 2002-07-12-08 build.
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3
Target Milestone: --- → Future

    
    

    
  
-> David Baron
Assignee: attinasi → dbaron
Component: Layout → Layout: R & A Pos
Depends on: 170927
QA Contact: petersen → ian

    
    

    
  
*** Bug 242682 has been marked as a duplicate of this bug. ***

    
    

    
  
Workaround. I used it for a popup menu but it can be set for other tags too.

/*
   workaround for mozilla bug #129375
   we move the object to the body node, get the offsetWidth and set the width
manually.
   then we move it back to the origin node
*/
function fixWidth (o) {
    while (o) {
        if (o.firstChild)
            fixWidth(o.firstChild);
        if (o.nodeType==1&&o.tagName.toLowerCase()=='ul')
            fixNow(o);
        o=o.nextSibling;
    }
}

function fixNow(o) {
    if (o.style.width&&o.style.width.length!=0)
        return;
    var op=o.parentNode;
    var next=o.nextSibling;
    o.ownerDocument.body.appendChild(o);
    o.style.position='absolute';
    o.style.width=o.offsetWidth;
    if(next)
        op.insertBefore(o,next);
    else
        op.appendChild(o);
}

    
    

    
  

      
      
      
      

        Attached file
          
        Test Case with Borders
        — 
      

    


  
This bug also causes borders to display incorectly.

    
    

    
  
Sorry if this is a dump question. I'm new to the Mozilla code.

Which method dose this calculation?
nsGenericHTMLElement::GetOffsetWidth
or 
nsComputedDOMStyle::GetOffsetWidthFor
Keywords: helpwanted

    
  
Assignee: dbaron → mats.palmgren
Keywords: helpwanted
OS: Windows NT → All

    
    

    
  
I now get 46 (52 for the border case) for the DIV that previously returned 0.

-> FIXED (by bug 201897)

Status: NEW → RESOLVED
Closed: 20 years ago
Depends on: 201897
Resolution: --- → FIXED

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






  

    
  







  

    

      
Attachment

      

      
      
      
      
    

    

      

        

          

            
General

            

              Creator: 



            

            
Created: 

            
Updated: 

            
Size: