CODEWITHSUNDEEP
javascriptjquery
ripper234
ripper234

Reputation: 230038

Incorrect button width and height

Take a look a this. I'm accessing the button's height and width using jquery's methods, and via accessing .css("height"), and I get two wrong answers.

I'm at 100% browser zoom. What's going on here?

Inner Height: 46, Inner Width: 196
Height: 46, Width: 196
CSS Height:44px, CSS Width: 184px
(The actual button dimensions are 200 X 50)

Upvotes: 2

Views: 585

Answers (4)

Milad Naseri
Milad Naseri

Reputation: 4118

You are overlooking the fact the by default, the boxing policy for CSS rendering excludes the border from the width-height. You have border-top = 1, border-bottom = 3, and border-right = border-left - 7, which accounts for the missing dimension.

To get the computed amounts for the width/height of an element, including it's border+padding you can use outerWidth()/outerHeight()

Also, in my case, I get all the values properly:

Inner Height: 46, Inner Width: 186

Height: 46, Width: 186

CSS Height:46px, CSS Width: 186px

(The actual button dimensions are 200 X 50)

Upvotes: 3

ripper234
ripper234

Reputation: 230038

All the answerers are technically correct, but, they left out this part: jquery's outerWidth() and outerHeight() take all these into account (I wasn't aware of these functions).

Demo.

Upvotes: 0

Wouter J
Wouter J

Reputation: 41934

The height and with of the button is 184 x 44 and it has a 1 x 6 padding and a 2px border. Totally it become 200 x 50:

button dimensions

It looks like a button width is the width you set - the padding - the border. So in jQuery you need to get the border and padding dimensions and count it.

And the innerWidth you get with jQuery is the width of the button + the padding, but not the border. So 184 x 44 + 6 x 1 became 196 x 46

Upvotes: 1

Michael Berkowski
Michael Berkowski

Reputation: 270637

Inspecting it in Chrome, I also see:

border: 2px outset buttonface;

Therefore, add 2px to each side, or 4px to the total dimensions so the calculation of the size of the button itself is correct.

Upvotes: 1

Related Questions