Best IT Recipes

Twitter Is the height of the loading text field too small?

I use bootstrap and I find that the height of the text box is too small. It is less than 10 pixels. I wonder if this is not enough or I made some mistakes.

I used firebug to check the text area. He says that the height is 18 pixels, which seems impossible to me ... And what I got is the same as what I got from here. Text area from bootstrap example . It scares me ... I got

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 is 18px, but it is not ... Can someone help ?!

+68
css twitter-bootstrap
Feb 10 2018-12-12T00:
source share
5 answers

Adding <!DOCTYPE HTML> should fix this. The same question was asked here: Error typing text using bootstrap Twitter

+166
Feb 26 '12 at 2:11
source share

Turning on the top answer didn't help

I already had <!DOCTYPE html> and this was not a problem for me. I don't know what the problem is, but I fixed this in my css:

 input[type=text], input[type=password], input[type=email], input[type=tel] { height: 28px !important; }

This is a workaround, and I'm not sure if it has some side effects.

+7
Jul 11 2018-12-11T00:
source share

I don’t know why, if I open a clean new HTML5 page, it works, but after adding the code I don’t know why this is happening. So I just open the bootstrap.min.css file and do a search: type="text" , and there is a height property there, and I change it to min-height because it should work.

+3
Nov 16 '12 at 5:37
source share

Yes, the overall height is 28px , because the addition and the border also add height to this input as follows:

 height 18px + 4px padding-top + 4px padding-bottom + 1px border-top + 1px border-bottom = Total 28px height
+2
Feb 10 2018-12-12T00:
source share

See my solution here in a similar thread .

Basically, the encoding of the text file caused all my problems. This showed up in such tiny differences in browsers that I wasted hours playing with CSS thinking, which was the reason.

+2
Jun 26 '12 at 6:45
source share


More articles:


All Articles