CODEWITHSUNDEEP
javascriptjqueryhtml
Jānis
Jānis

Reputation: 1802

Can't change element dimensions

I am trying to understand why I can't change element's width or height. I was using jquery textfill library until another jquery library was added that broke it. After debugging I found that it's because my $('.msg-text span:first') element's width is 0. That was the first weird thing, because in element inspector it's width wasn't 0. Also the height was different. Without much thinking, I set it's width to 100, because the library would change it anyway. But that doesn't do anything. I mean - here is the output from chrome developer tools:

$('.msg-text span:first').width();
0
$('.msg-text span:first').width(100);
[<span data-in-effect=​"bounceIn" data-in-delay=​"30" data-in-delayscale=​"1" data-out-delay=​"30" data-out-delayscale=​"1" data-out-effect=​"bounceOut" data-out-reverse=​"true" class=​"ng-binding" style=​"display:​ initial;​visibility:​ visible;​ font-size:​ 302px;​ height:​ 100px;​ width:​ 100px;​">​…​</span>​]
$('.msg-text span:first').width();
0

Same goes for height. Tried with other element's and it's fine. The moment when it's width is set to 0 is when 2nd library insert content in it with element.html()

If more details are required I will be pleased to provide them. One more weird thing is that for that specific page I am writing, if stop code in some particular places, dom highlighting doesn't work and when I stop the code when I check for element's width, I see only it's shape (with those dotted lines), and setting it's background doesn't show it either. I doubt that this is related, but who knows...

Upvotes: 0

Views: 67

Answers (1)

philippsh
philippsh

Reputation: 798

In order to make it work you should probably add 'display: block' or 'display: inline-block' to the element.

Upvotes: 1

Related Questions