Twitter Bootstrap text field's height too small?
CssTwitter BootstrapCss Problem Overview
I am using bootstrap and i find the height of the text field is too small.It's like less than 10px.I am wondering if it is small or i made some mistakes.
I used firebug to inspect the text area.It says the height is 18px,which seems impossible for me...And what i got is the same as i got from here.Text area from bootstrap example.It makes me rather confused... what i got is
input, textarea, select, .uneditable-input {
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #555555;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
margin-bottom: 9px;
padding: 4px;
}
The height says it's 18px, but it's not... Can somebody help?!
Css Solutions
Solution 1 - Css
Adding <!DOCTYPE HTML> should fix this. The same question was asked here: https://stackoverflow.com/questions/7196398/text-input-rendering-issue-with-twitter-bootstrap-css
Solution 2 - Css
Incase the top answer didn't help
I had <!DOCTYPE html> already and it wasn't the problem for me. I don't know what is the problem, but
I fixed it with this in my css:
input[type=text], input[type=password], input[type=email], input[type=tel] {
height: 28px !important;
}
It's a workaround and I'm not sure if it has some side effects.
Solution 3 - Css
I don't know why if I open a clean new HTML5 page it works but after I add some code I don't know why it happens. So I just open the bootstrap.min.css file and search:type="text" and there there is height property and I change it to min-height for it have to be working.
Solution 4 - Css
Yes the total height is 28px because padding & border also add height to that input like this:
height 18px +
4px padding-top +
4px padding-bottom +
1px border-top +
1px border-bottom =
Total 28px height
Solution 5 - Css
See my solution here in a similar thread.
Basically, the text file encoding was causing all my trouble. It manifested in such minute differences across browsers that I wasted hours fiddling with CSS thinking that was the cause.