Twitter Bootstrap text field's height too small?

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?!

Adding <!DOCTYPE HTML> should fix this. The same question was asked here: Text input rendering issue with Twitter Bootstrap

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.

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.

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

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.

Twitter Bootstrap text field's height too small?

Related

Recent Posts