Question

I’ve uploaded this question a while ago but it ended up giving me the tumbleweed badge so I’m trying again.

I’m going through Michael Hartl’s railstutorial right now and I’ve encountered a problem where box-sizing property is interfering with form heights as shown in pictures below.

@mixin box_sizing {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input, textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  height: auto;
  margin-bottom: 15px;
  @include box_sizing; <--- this line here is causing issues
}

(box-sizing property in effect)

(box-sizing property not in effect)

Notice how much smaller forms are when box-sizing property is in effect? You can’t really view full letters because the height is so low. I’ve tried to change the height property under input, textarea, ..etc. but it seems like my code is being overridden by Bootstrap. If you have any idea how to make the forms bigger (greater height) I would really appreciate it.

Answer 1

box-sizing: border-box changes the box model so padding is taken out from the height, rather than adding to it.

So this block:

div {
  box-sizing: content-box; // default
  height: 2em;
  padding: .25em;
}

Will be 2.5em tall, and this block:

div {
  box-sizing: border-box;
  height: 2em;
  padding: .25em;
}

will be 2em tall, with .5em of spacing partitioned for the padding.

The other issue is how bootstrap defines the height of inputs:

input[type="text"], ...other selectors..,
.uneditable-input {
  display: inline-block;
  height: 20px;
  ...
}

The reason defining a height wasn’t working, is because input[type="text"] is more specific than input, and therefore the bootstrap declaration was overriding yours.

To solve the problem you are having with the inputs, define a height and use a more specific selector:

input[type="text"], textarea, select, .uneditable-input {
  border: 1px solid #bbb;
  width: 100%;
  height: 2em;
  margin-bottom: 15px;
  @include box_sizing;
}

Demo