CODEWITHSUNDEEP
htmlcsswordpresstwitter-bootstrap
ken
ken

Reputation: 9013

Twitter bootstrap form fields too small

I know this topic "sounds" a lot like others that are out there but I've looked through all the existing threads (well "most" anyway) and I still have a problem I could use help on ...

The problem is not too dissimilar to what others have described:

Now a LOT of people solved their problem by making sure they specified the DOCTYPE correctly at the top of their HTML document. I too found that this simple adjustment did the trick on my static HTML mock-up. Sadly when I switched to Wordpress the problem reappeared and yet I am very definitely putting the HTML 5 DOCTYPE signature at the very top of the output (I've checked this several times with "view source" as I thought maybe I'd lost my mind).

I've included a quick snapshot of the screen in case this helps shed any light on this. You can find it here: http://www.flickr.com/photos/14261777@N00/6957941282/. Note the tiny little dots at the bottom that are supposed to be radio buttons. More obvious are the INPUT fields that are not tall enough. Oh, and also for completeness, here's a screenshot of how my HTML source starts: http://www.flickr.com/photos/14261777@N00/6957952802/.

I'd love to hear from anyone who has a theory on WHY this could be happening and any workarounds that might exist (even if the source of the solution is unknown). I have tried imposing CSS attributes like line-height, height, min-height, etc. and a few others with zero effect.

Upvotes: 10

Views: 7739

Answers (2)

ken
ken

Reputation: 9013

If anyone's interested, here's what I added to fix the problem:

input, input[type="text"], input[type="radio"], isindex, .uneditable-input {
    padding: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCC; 
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCC;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.input-append .add-on, .input-append .btn {
    margin-left: -6px;
}

input[type=checkbox] {
        -webkit-appearance: checkbox;
}

Upvotes: 1

Terry
Terry

Reputation: 14219

It looks like you have two problems. The input type=text problem and the radio button problem. Without seeing your code, it appears as though your textbox problem is related to DOCTYPE and your radio button problem is related to overriding CSS styles (can confirm if you post the inspector output for the radio buttons).

If your variables are showing as the correct values (eg. 18px height), which they are, then it is most definitely a DOCTYPE issue.

From this article on A List Apart:

You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers.

You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. Yet, in browsers designed to support these very standards, your site is failing. A faulty DOCTYPE is likely to blame.

This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags.

Here's the recommended list of DOCTYPEs as per W3C:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Upvotes: 10

Related Questions