Search code examples
csstwitter-bootstrapwidth

Different element width and CSS width

When I look at an element using FF inspector, it shows 225px width for that.
But CSS width: 207px is applied for this element.
Clue is bootstrap. I think it causes this difference by different resolutions. Also is there a tool which reveals change sources?
I mean a tool to notify when special property changed.
Thank in advance for any help

These are taken from FF Inspector in two states:
Element is input[type=text]

<input aria-invalid="true" class="invalid" name="jform[university]" id="jform_university" value="" required="" aria-required="true" type="text">


State 1: Width = 225px 

*::-moz-selection {
    background: #F9924F none repeat scroll 0% 0%;
    color: #FFF;
}
element {
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
    max-width: 207px !important;
}
.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #FFF;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    border-radius: 5px;
    vertical-align: middle;
    line-height: 36px;
    height: 36px;
    font-size: 12px;
    padding: 0px 8px;
    border: 1px solid #CACACA;
    color: #424242;
    background: #FFF none repeat scroll 0% 0%;
    font-family: Tahoma;
}
.form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
}
body, a, input, .jm-title, .jm-module, .btn {
    font-family: Yekan !important;
}
input, textarea, .uneditable-input {
    margin-left: 0px;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}
input, textarea, select, .uneditable-input {
    display: inline-block;
    height: 18px;
    padding: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    border: 1px solid #CCC;
}
label, input, button, select, textarea {
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    margin: 0px;
    font-size: 100%;
    vertical-align: middle;
}
body {
    color: #6A6A6A;
    font-family: Tahoma;
    font-size: 11px;
}
body {
    line-height: 1.5em;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
}
html {
    font-size: 100%;
}

State 2: Width = 207px 

*::-moz-selection {
    background: #F9924F none repeat scroll 0% 0%;
    color: #FFF;
}
element {
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
    max-width: 207px !important;
}
.form-search input, .form-search textarea, .form-search select, .form-search .help-inline, .form-search .uneditable-input, .form-search .input-prepend, .form-search .input-append, .form-inline input, .form-inline textarea, .form-inline select, .form-inline .help-inline, .form-inline .uneditable-input, .form-inline .input-prepend, .form-inline .input-append, .form-horizontal input, .form-horizontal textarea, .form-horizontal select, .form-horizontal .help-inline, .form-horizontal .uneditable-input, .form-horizontal .input-prepend, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
    vertical-align: middle;
}
textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    background-color: #FFF;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    display: inline-block;
    border-radius: 5px;
    vertical-align: middle;
    line-height: 36px;
    height: 36px;
    font-size: 12px;
    padding: 0px 8px;
    border: 1px solid #CACACA;
    color: #424242;
    background: #FFF none repeat scroll 0% 0%;
    font-family: Tahoma;
}
.form-search input, .form-inline input, .form-horizontal input, .form-search textarea, .form-inline textarea, .form-horizontal textarea, .form-search select, .form-inline select, .form-horizontal select, .form-search .help-inline, .form-inline .help-inline, .form-horizontal .help-inline, .form-search .uneditable-input, .form-inline .uneditable-input, .form-horizontal .uneditable-input, .form-search .input-prepend, .form-inline .input-prepend, .form-horizontal .input-prepend, .form-search .input-append, .form-inline .input-append, .form-horizontal .input-append {
    display: inline-block;
    margin-bottom: 0px;
}
body, a, input, .jm-title, .jm-module, .btn {
    font-family: Yekan !important;
}
input, textarea, .uneditable-input {
    margin-left: 0px;
}
label, input, button, select, textarea {
    font-size: 13px;
    font-weight: normal;
    line-height: 20px;
}
input, textarea, select, .uneditable-input {
    display: inline-block;
    height: 18px;
    padding: 4px;
    font-size: 13px;
    line-height: 18px;
    color: #555;
    border: 1px solid #CCC;
}
label, input, button, select, textarea {
    font-size: 11px;
    font-weight: normal;
    line-height: 18px;
}
button, input {
    line-height: normal;
}
button, input, select, textarea {
    margin: 0px;
    font-size: 100%;
    vertical-align: middle;
}
body {
    color: #6A6A6A;
    font-family: Tahoma;
    font-size: 11px;
}
body {
    line-height: 1.5em;
}
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
}
html {
    font-size: 100%;

Solution

  • As I understand you have width:207px set on your input and ask yourself (and us) why it shows up with 225px width on the page.

    You seem to be running into css box model computations.

    By default (and that's the mode you're in because you didn't specify anything else) boxes are in box-sizing:content-box mode. What you want is box-sizing:border-box as it almost always behaves more natural. To apply this on an element you have to set the box-sizing property on it.


    (source: binvisions.com)

    content-box

    Computes the width/height of an element only from its content. That means padding, border-width and margin are all "outside" the dimensions of the element.

    When you specify width:207px in this model this means "the content of this element should be 207 px wide". Padding and border-width get added to that.

    border-box

    Adds padding and border-width to this computation. The width is now the sum of content + padding + border-width.

    Specifying width:207px with padding:8px and border-width:1px means there are 207px - 2*8px - 2*1px = 189px room for the content.

    problem-specific solution

    You apply

    select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    width: 207px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    padding: 0 8px;
    border: 1px solid #CACACA;
}

    As you are in content-box mode, the computed width is 207px + 2*8px + 2*1px which is exactly 225px what you observed.

    apply box-sizing:border-box to the element and it works. But beware that might break everything else with that style. Maybe you're better off with applying width:189px to it.