Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter's Bootstrap - Form Inputs Too Thin

I'm using Twitter's Bootstrap to create the HTML/CSS for my website. I run into a problem when creating the forms, however:

screenshot of error

As you can see the inputs are too skinny for the text. I have tested with my own code, as well as copy/pasting the exact code from their documentation:

http://twitter.github.com/bootstrap/base-css.html#forms

I am including two resources:

<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

As far as I can tell they are loading correctly. Am I missing a resource?

like image 729
sdasdadas Avatar asked Feb 07 '12 02:02

sdasdadas


3 Answers

Damnit. I was missing

<!DOCTYPE html> 

at the top of the document.

like image 154
sdasdadas Avatar answered Oct 18 '22 03:10

sdasdadas


The <!DOCTYPE html> fix did not work for me. But what helped was finding and removing following in our codebase:

*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
like image 25
stigi Avatar answered Oct 18 '22 04:10

stigi


I had this problem and drove me mad for hours as the cause was completely invisible. I already had the <!DOCTYPE html> there and all the code was perfect. The problem turned out to be the text file encoding.

Using the linux 'file' command showed the source file coded as: "PHP script, UTF-8 Unicode (with BOM) text".
Running 'more' on the file showed some garbage chars () at the start of the files. I created new files within linux and copied/pasted the code in and everything started working as expected.

like image 5
user1481102 Avatar answered Oct 18 '22 05:10

user1481102