CODEWITHSUNDEEP
htmlcss
P.M
P.M

Reputation: 3158

input width, padding missmatch

I am having a quick and interesting problem. The padding applied to the input tag, is not being added the width of the input, but rather subtracted.

In the print-screen, you can see that .acct_input_bg element has width of 390px. In DevTool's box-model utility, the element is having 363px ( 390 - 20 - 7)!

I googled a bit and found that Paul Irish blogged about the problem, but I have boostrap.css which applies proper box-sizing element. I also found less helpful here on stackoverflow in this query and this.

Thanks for helping out!

input width and padding mismatch

Upvotes: 0

Views: 102

Answers (2)

user2598812
user2598812

Reputation:

use this:

-webkit-box-sizing: content-box !important;

Upvotes: 1

Kobi
Kobi

Reputation: 138007

This is caused by Bootstrap.
The default box sizing is content-box, and Bootstrap is changing it to border-box, and that is the behavior you're seeing.

Have a look at the source code:

// Reset the box-sizing
//
// Heads up! This reset may cause conflicts with some third-party widgets.
// For recommendations on resolving such conflicts, see
// http://getbootstrap.com/getting-started/#third-box-sizing
* {
.box-sizing(border-box);
}
*:before,
*:after {
.box-sizing(border-box);
}

Upvotes: 2

Related Questions