input padding cutting out text in firefox

Question

In firefox when I use a bootstrap form-control input element, if I pad the input element it cuts out the text by padding inwards rather than around the text. It only seems to have this effect in firefox. This jsfiddle demonstrates the problem:

http://jsfiddle.net/v76xB/

Form input html:

<input id="name" type="text" class="form-control join-form" placeholder="Enter a Username">

CSS:

.join-form {
    padding: 24px; /*comment this out to see effect of padding */
    margin: 12px 0px;
    font-size: 16px;
    letter-spacing: 0px;
    font-weight: 300;
}

This is about as specific as I can get to replicate this error. I'm also half hoping it's just a browser quirk related completely to me, but I can't check being as I'm working individually and only have one machine.

Solution 1

The Bootstrap form-control class gets a fixed height by default. Just add a height: auto; to your .join-form selector(to keep flexibility), and change the padding to get the original effect, like this padding: 14px 20px;

See here: http://jsfiddle.net/x78Bh/

Solution 2

Add height property then apply the padding like below. Now you can see both firefox and chrome will behave same.

.join-form {
padding: 20px; /*comment this out to see effect of padding */
margin: 12px 0px;
font-size: 16px;
letter-spacing: 0px;
font-weight: 300;
height:60px;
}

DEMO

Comments

[Jake Gabb]

Thankyou! Both of your answers are great, they're both almost the same. I'm so glad the solution was so simple. It took me forever to find out what was causing this error in the first place!

[Jake Gabb]

Thankyou! Both of your answers are great, they're both almost the same. I'm so glad the solution was so simple. It took me forever to find out what was causing this error in the first place!