CODEWITHSUNDEEP
javascriptjqueryhtml
Daniel G
Daniel G

Reputation: 433

jQuery element width update problem

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?

Upvotes: 4

Views: 651

Answers (1)

Pointy
Pointy

Reputation: 413709

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 ...)

Upvotes: 1

Related Questions