Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

input padding cutting out text in firefox

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.

like image 368
Jake Gabb Avatar asked Jun 27 '14 09:06

Jake Gabb


2 Answers

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/

like image 91
ThomasA Avatar answered Oct 02 '22 18:10

ThomasA


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

like image 43
Suresh Ponnukalai Avatar answered Oct 02 '22 20:10

Suresh Ponnukalai