Text input rendering issue with Twitter Bootstrap

Question

I'm trying to use Twitter's bootstrap for a quick few pages. I'm having problems getting text fields to render like they do at http://twitter.github.com/bootstrap/

My HTML looks like

<div class="clearfix">
    <label for="unit">unit</label>
    <div class="input">
       <input class="xlarge" id="unit" name="unit" type="text" value="" />
    </div>
</div>

Which seems to be all of the relevant CSS classes that I see on the demo page. However, my text input fields render with the input area too small vertically, so the cursor and text overlap with the bottom border of the input area. This is with latest chrome on win7.

enter image description here

score 58 · Accepted Answer · answered Sep 08 '11 at 11:21

58

This behavior is also triggered when the doctype is wrongly typed. In my case, <!DOCTYPE> (wrong) was fixed to <!DOCTYPE HTML> and the problem went away.

answered Sep 08 '11 at 11:21

Hanne Olsen

882
7
7

Also keep in mind (happened to me) that the DOCTYPE should be outputted as the first thing of your page. I have debug info that was written before the DOCTYPE which resulted in the same effect as you described in your question. – patrick Oct 12 '12 at 12:21

score 9 · Answer 2 · answered Mar 21 '12 at 20:16

http://twitter.github.com/bootstrap/scaffolding.html

Requires HTML5 doctype Bootstrap makes use of HTML elements and CSS properties that require the use of the HTML5 doctype. Be sure to include it at the beginning of every Bootstrapped page in your project.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

score 5 · Answer 3 · answered Aug 25 '11 at 20:27

5

This behavior is seen when the document lacks <html> tags at the outermost level. After putting my template through a tidying process, it looks like it should. Thanks notepad++.

answered Aug 25 '11 at 20:27

totowtwo

2,101
1
14
21

score 2 · Answer 4 · answered May 20 '12 at 18:57

I had the same problem, but in my case it was caused by having an inconsistent text encoding across files. Some files were encoded in UTF-8 without BOM (byte order mark), while other files were encoded in UTF-8 with BOM included. I switched all files to UTF-8 without BOM and it worked correctly.

score 0 · Answer 5 · answered Sep 09 '13 at 14:43

0

replace class="x-large" to : class="input-block-level"

answered Sep 09 '13 at 14:43

iconte

31
3

score 0 · Answer 6 · answered Apr 03 '14 at 12:56

In my case:
- I had the input text in a form
- It did work in Firefox and did not work in Chrome

I fixed this by overriding the line-height in the bootstrap css. First it was like this:

line-height: inherit;

and when I changed it in my css(so it overrides the bootstrap css):

line-height: normal;

It worked!

For people who see this and don't know what I'm talking about, press f12 and go to your textbox.
Now in the styles tab u will see:

input, button, select, textarea {
   font-family: inherit;
   font-size: inherit;
   font-height: inherit;
}

that is the one that you want to override.

score 0 · Answer 7 · edited Mar 19 '15 at 16:31

Thanks to all, that help me.
I also face this problem, to help the other user I share my journey how I solve it. The problem look like this : enter image description here

This problem comes in Firefox its look proper in chrome.

How I found solution:

I know you are think that this is the problem with css optimize. Or there is not proper CSS behind it.
I'm using bootstrap then second thought comes in mind is that there is not proper class place to input box.
When I come to this question and started reading of answer they suggested that the problem with <!DOCTYPE html> I don't believe, but I started look that page.
I also check with View Source in Firefox but there is present that <!DOCTYPE html>
Suddenly I look at the firebug html and there is really no DOCTYPE here comes while in all other pages it is coming.

Now I think why this happened, reason behind it.
Then I look at the jsp pages. This is the problem in my case, someone include the other jsp page before the body.

Hope this highlight help.

score -1 · Answer 8 · answered May 19 '13 at 07:06

-1

My file has been created within Windows and I had a similar problem, i.e. the height was too small so descenders were truncated. My file has some PHP as the first lines followed by the required html. After reading all the comments, I moved my (2 lines) to the top ahead of the PHP and the height increased ... so problem resolved. It appears that DOCTYPE must be at the start even before any PHP.

answered May 19 '13 at 07:06

user2398368

1

`DOCTYPE` must be the first line in the resulting HTML. But that does not mean is have to be before any PHP. You just need to make sure the PHP does not generate any output (including empty line or even space character). You can even generate the `DOCTYPE` using PHP. – Martin Prikryl May 19 '13 at 07:24

Text input rendering issue with Twitter Bootstrap

8 Answers8

Linked