Best IT Recipes

Error typing text using Twitter Bootstrap

I am trying to use Twitter upload for multiple pages. I'm having trouble getting text fields for rendering, as in 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>

It seems like all the relevant CSS classes that I see on the demo page. However, text input fields are rendered with a small input area, so the cursor and text overlap with the lower border of the input area. This is with the latest chrome on win7.

enter image description here

+28
html css twitter-bootstrap
Aug 25 '11 at 19:55
source share
8 answers

This behavior also fires when the doctype type is invalid. In my case, <!DOCTYPE> (invalid) was fixed to <!DOCTYPE HTML> , and the problem disappeared.

+58
Sep 08 '11 at 11:21
source share

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

HTML5 required doctype Bootstrap uses HTML elements and CSS properties that require the use of a document such as HTML5. Remember to include it at the beginning of every loaded page in your project.

 <!DOCTYPE html> <html lang="en"> ... </html>
+9
Mar 21 '12 at 20:16
source share

This behavior occurs when there are no <html> tags in the document at the outermost level. After I installed my template during the cleaning process, it looks the way it should. Thanks notepad ++.

+5
Aug 25 '11 at 20:27
source share

I had the same problem, but in my case it was caused by the presence of inconsistent text encoding between the files. Some files were encoded in UTF-8 without specification (byte order of bytes), and other files were encoded in UTF-8 with specification included. I switched all files to UTF-8 without specification and worked correctly.

+2
May 20 '12 at 18:57
source share

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

0
Sep 09 '13 at 14:43
source share

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

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

 line-height: inherit;

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

 line-height: normal;

It worked!



For people who see this and don’t know what I'm saying, press f12 and go to the text box.
Now on the styles tab u see:

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

which you want to override.

0
Apr 03 '14 at
source share

Thanks to everyone that helps me.
I also run into this problem to help another user share their journey as I solve it. The problem looks like this: enter image description here

This issue occurs in Firefox, which looks like chrome.

How I found a solution:

  • I know what you think is the problem with css optimization. Or there is no proper CSS behind it.
  • I use bootstrap, then the second thought arises that there is no suitable place for classes in the input field.
  • When I came to this question and started reading the answer, they suggested that the problem with <!DOCTYPE html> I do not believe, but I started looking for this page.
  • I also check with View Source in Firefox, but there is that <!DOCTYPE html>
  • Suddenly I look at hbb firebug, and in fact there is no DOCTYPE until it appears on all other pages.

Now I think why this happened, the reason for this.
Then I look at the jsp pages. This is a problem in my case, someone includes another jsp page in front of the body.

Hope this helps.

0
Jul 23 '14 at 6:24
source share

My file was created on Windows, and I had a similar problem, i.e. the height was too small, therefore declining. There is PHP in my file, as the first lines, followed by the required html. After reading all the comments, I translated my (2 lines) up front in front of PHP, and the height increased ... so the problem is solved. It seems like DOCTYPE should start before PHP.

-one
May 19 '13 at 7:06
source share


More articles:


All Articles