Incorrect jQuery element width calculation

Question

Having a simple html code

<div id="header">
  <div id="headerBox">
    <div id="headerText">
    </div>
  </div>
</div>

with css styles

div#header {
    display: block;
    overflow: hidden;    
    margin: 0;
    padding: 0;
    width: 100%;
}
div#headerBox {
    padding: 1em;
    text-align: center;
    white-space: nowrap;
    border-bottom: 10px double gray;
}
div#headerText {
    background: red;
    display: inline-block;
}

and jQuery (2.x edge)

function resize(win) {
  var size;
  var w = $('#headerBox').width();
  $('#headerText').html('');
  $('#headerBox').css('font-size', 1 + 'px');
  $('#headerText').html(
    "width of <span style=\"font-size:2em;\">headerBox</span> element is " + w + "px");
  while ($('#headerText').width() <= w) {
    size = parseInt($('#headerBox').css('font-size').replace(/\D+$/, ''), 10);
    $('#headerBox').css('font-size', (size + 1) + 'px');
  }
  $('#headerBox').css('font-size', size + 'px');
}

$(window).resize(function(e){
  resize(this)
});

resize(window);

all together accessible via this fiddle,

I experience incorrect jQuery element width calculation. When you access the above fiddle, you see that headerText element is too wide. There should be same right padding as is on left side, text should be centered. Once you resize the Result window (in the fiddle), text is adjusted as supposed to.

Question is WHY there is incorrect calculation on the very first time?

It seems that var w = $('#headerBox').width(); is incorrect calculated. WHY?

enter image description here

Perhaps you wanted outerWidth() instead? api.jquery.com/outerWidth — Blazemonger
– Blazemonger, Commented Dec 8, 2013 at 13:38
@A.Wolff - I am using Chrome 31.0.1650.63m and it does not display it correctly — Ωmega
– Ωmega, Commented Dec 8, 2013 at 13:41
@A.Wolff - close it, open again and then resize the Result window in the fiddle - you see no difference? — Ωmega
– Ωmega, Commented Dec 8, 2013 at 13:44

CosX · Accepted Answer · 2013-12-08 14:00:34Z

1

JQuery .width doesn't include the padding of #headerbox. Use .outerWidth to get correct width.

var w = $('#headerBox').outerWidth();

answered Dec 8, 2013 at 14:00

CosX

2,0402 gold badges19 silver badges27 bronze badges

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

1 Comment

Ωmega Over a year ago

-1 :: This is not an answer to my problem. Sure .width() does not include padding. I know that. I don't want padding to be included in the calculation.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

Found the problem:

Due to padding: 1em; for headerBox, width of this element changes with change of font-size.

So in while loop I need to work with up-to-date information, not the one I stored at the beginning.

Therefore

var w = $('#headerBox').width();
...
while ($('#headerText').width() <= w) {
  ...
}

needs to be changed to

while ($('#headerText').width() <= $('#headerBox').width()) {
  ...
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Dec 8, 2013 at 16:22

Ωmega

44k35 gold badges143 silver badges213 bronze badges

Collectives™ on Stack Overflow

Incorrect jQuery element width calculation

2 Answers 2

1 Comment

Found the problem:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Found the problem:

Comments

Your Answer

Sign up or log in

Post as a guest

Related