Twitter Bootstrap text field's height too small?

Question

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

OK.I find [this](http://stackoverflow.com/questions/9170305/twitters-bootstrap-form-inputs-too-thin) helped.But I would be glad if anyone can explain this to me.It seems pretty weird that css properties are exact the same but the outcome is so different...What the !DOCTYPE part has to do with css?! — Gnijuohz, Feb 10 '12 at 04:58
The DOCTYPE determines how lenient a browser will be when rendering a page. Check out http://www.quirksmode.org/css/quirksmode.html for some examples. — Rodney Folz, Feb 10 '12 at 05:02
I read that but I can't figure out which part would go wrong if i don't set DOCTYPE :P...confused still... — Gnijuohz, Feb 10 '12 at 05:12
possible duplicate of [text input rendering issue with twitter bootstrap.css](http://stackoverflow.com/questions/7196398/text-input-rendering-issue-with-twitter-bootstrap-css) — random, May 24 '14 at 19:29

score 167 · Accepted Answer · edited May 23 '17 at 12:24

167

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

edited May 23 '17 at 12:24

Community

1
1

answered Feb 26 '12 at 02:11

Diego Allen

4,623
5
30
33

Yes.I found a similar question too.I posted it on the comment area above.I should have ended this question.But I didn't figure out why it fixed the problem though. – Gnijuohz Feb 26 '12 at 02:14
1

Thank you so much. This was a real pain. – Richard Clayton Jul 02 '12 at 15:48
5

Fixed it for me! But why? :) – Lukas Feb 23 '13 at 15:04
i just spend ed over 2 hours to get this fixed,because the icons didn't matched the text fields.By accident deleted the doctype. +1...THANKS!! – HenryW Mar 14 '13 at 00:13
I think it has something to do with quirks mode. If you accidentally leave out the doctype or use a misformatted doctype, it will activate quirks mode and give you weird results. http://www.quirksmode.org/css/quirksmode.html and http://hsivonen.iki.fi/doctype/ – Ryan Apr 16 '13 at 16:40
6

I have in my document, and this does not fix the issue :\ – ryandawkins Apr 22 '13 at 16:12
Was about to write my input text css before I find this. Thanks :) – Sanjay Kumar Jul 29 '13 at 11:17
lol, take me a day for such simple solution like this, been searching through css but not found :D – ikhsan Sep 09 '13 at 15:33

Jeewes · Answer 2 · 2015-12-07T12:33:41.770

7

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.

edited Dec 07 '15 at 12:33

answered Jul 11 '12 at 11:55

Jeewes

1,333
2
16
18

score 3 · Answer 3 · edited Nov 16 '12 at 06:12

3

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.

edited Nov 16 '12 at 06:12

Peter O.

32,158
14
82
96

answered Nov 16 '12 at 05:37

Tamir

31
1

score 2 · Answer 4 · edited May 23 '17 at 12:09

2

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.

edited May 23 '17 at 12:09

Community

1
1

answered Jun 26 '12 at 06:45

user1481102

71
1
4

You are right nothing to do with CSS. I had the same problem with one of my php files being encoded in utf8 instead of ascii. – nakhli Dec 31 '12 at 15:42

score 2 · Answer 5 · answered Feb 10 '12 at 04:56

2

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

answered Feb 10 '12 at 04:56

sandeep

91,313
23
137
155

Twitter Bootstrap text field's height too small?

5 Answers5

Linked