jQuery element width update problem

Question

I want to get element width using jQuery. The problem is when I change html inside this element. I want to get its width and width() returns its parent width instead, it looks like html() doesn't update element width at all.

But... It works perfectly when no DOCTYPE is specified. I'm using IE in WebBrowser control.

css:

 p {
    margin: 0;
    padding: 0;
   }

 .name {
    font-weight: bold;
    }

 .description {
    color: #444;
    width: 190px;
    white-space: nowrap;
    overflow: hidden;
    }

 #container {

    }

html looks like this:

<div id="container">
<div id="friend0"><p class="name">Name</p><div class="description"><p>Description</p></div>
</div>

js:

var x1 = GetFriend(id).children('.description').width();
var x2 = GetFriend(id).children('.description').children('p').width();

(some jQuery animation code) and after that:

GetFriend(id).children('.description').children('p').html('some now text here...');
var x3 = GetFriend(id).children('.description').children('p').width();

and x3 is the same as .description with value of 190 but when I don't declare DOCTYPE at the beginning of html it returns correctly updated value.

I need to have DOCTYPE declared because some animation code causes flickering of scrollbars.

Anyone know how to do it correctly?

You already are doing it correctly. Block elements like <p> will use the width of their parent; that's the way the standard box model works. It changes when you drop the DOCTYPE because you're toggling the browser in and out of quirks mode. — Pointy
– Pointy, Commented Dec 27, 2010 at 16:44
@Pointy is correct. To prove it, turn your <p> in to a <span> and you'll notice width works as expected. — Brad Christie
– Brad Christie, Commented Dec 27, 2010 at 16:49
@Pointy: Could you please post your comment as an answer so we can upvote it and get this question off the Unanswered list? Thanks. — Bill the Lizard
– Bill the Lizard, Commented Jan 20, 2011 at 0:27

Pointy · Accepted Answer · 2011-01-20 04:19:19Z

1

You already are doing it correctly. Block elements like <p> will use the width of their parent; that's the way the standard box model works. It changes when you drop the DOCTYPE because you're toggling the browser in and out of quirks mode.

(Comment posted as answer ...)

answered Jan 20, 2011 at 4:19

Pointy

415k62 gold badges600 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery element width update problem

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related