CSS sort by width with height of form

Question

I downloaded this question a while ago, but it ended up giving me an overflow icon, so I'm trying again.

Now I am going to conduct a Michael Hartle speech collection, and I am faced with a problem when the box-sizing property interferes with the heights of the form, as shown in the figures 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 is valid)

(window size property is not valid)

Notice how smaller the shapes are when the box-sizing property is in effect? You cannot really see the full letters, because the height is so low. I tried to change the height property on input, textarea, .. etc. but it looks like my code is being overridden by Bootstrap. If you have an idea on how to make the shapes larger (large height), I would really appreciate it.

Answer 1

box-sizing: border-box changes the model of the window, so the add is removed from the height, not added to it.

So this block:

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

It will be 2.5em high, and this block:

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

will be 2em high, with a .5em interval divided to fill.

Another issue is how bootstrap determines the height of the inputs:

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

The reason defining the height didn't work, because input[type="text"] more specific than input , and so the bootstrap declaration overrides yours.

To solve your input problem, determine the 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