CODEWITHSUNDEEP
javascripthtmldom
Jaroslav Záruba
Jaroslav Záruba

Reputation: 4876

clientWidth "lying", unable to determine actual width of element

<div style="width: 50px;">
  <div id="theElement" style="position: relative; left 25px;">textMuchLongerThan50[</div>
</div>

document.getElementById("theElement").clientWidth always returns 50, which is width of the parent element, while it is obvious the element's content is much wider

(The element itself actually has this width, but I need to know its "natural" width, i.e. width of its content.)

Experiencing this behaviour in Chrome and IE. If anoyne knew how to determine the actual dimensions of a relatively positioned DIV residing in another DIV with pre-set/limited width...?

Upvotes: 0

Views: 1437

Answers (2)

Spudley
Spudley

Reputation: 168685

This is because it's a block element, and it is actually taking its width from its parent. The text inside it is overflowing outside of its container, but isn't affecting the container's actual width.

You can prove this by adding a border style to the inner <div>.

You can cause the element to take its width from the width of the text by changing its display type.

If you set it to display:inline-block;, it will report the correct width.

And if you add a border now, you'll notice that it has changed as well.

Upvotes: 0

Joe
Joe

Reputation: 82594

You are interested in scrollWidth: Example

Upvotes: 3

Related Questions