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.
8 answers
solution1
58 ACCPTED 2011-09-08 11:21:37
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.
solution2
9 2012-03-21 20:16:29
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>
solution3
5 2011-08-25 20:27:06
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++.
solution4
2 2012-05-20 18:57:03
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.
solution5
0 2013-09-09 14:43:00
将class="x-large"替换为： class="input-block-level"
solution6
0 2014-04-03 12:56:28
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.
solution7
0 2014-07-23 06:24:21
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 :
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.
solution8
-1 2013-05-19 07:06:00
My file has been created within Windows and I had a similar problem, ie 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.