Input Padding Cutting Out Text in Firefox

input padding cutting out text in firefox

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/

Why is Firefox cutting off the text in my input type=text/?

Try increasing your line height property. That would be restricting the viewable area for the letters causing them to be cut off. Firefox's rendering engine renders line height slightly different.

Why does Safari & Firefox cut off bottom of input text?

You can reduce the bottom padding and/or the font size and that will fix your overflow issue.

input[type='text'][name='Worksheet-Name']{
    font-size: 35px;//instead of 36
    margin-top: 20px;
    margin-left: 15px;
}

or

.input-lg {
    height: 46px;
    padding: 10px 16px 0;//change here to have 0
    font-size: 18px;
    line-height: 1.33333;
    border-radius: 6px;
}

also possibly answered here with line-height:
Why is Firefox cutting off the text in my <input type="text"/>?

Input text bug on Firefox but not Safari or Chrome

You can solve it, work around, by doing the following in form-control class:

.form-control {
    line-height: 1;
    height: auto;
    -moz-box-sizing: border-box;
}

Checkout the DEMO

Padding inside input shows 2 result in Firefox and other browsers

Please check if it works for you

input {
 padding: 10px;
 font-size: 14px;
 font-weight: normal;
 width: 100%;
 line-height: 18px;
 height: auto;
}

Input text shows in Chrome but not Firefox

The padding is taking up the entire element. You can keep the padding-left, just remove top padding and set height to 50px (25px padding x 2) http://jsfiddle.net/vxkp6beg/7/:

.navbar-collapse form[role="search"] input {
        padding: 0 12px;
        height: 50px;
        font-size: 18pt;
        opacity: 0;
        display: none;
    }

Button text pushes away the padding in Firefox

You should use the <button> element, this gives you more control over what happens with its contents:

<button class="wrong">
  <span>this pushes text to the left, ignoring padding</span>
</button>

And the styles then are:

.wrong {
    width: 100px;
    overflow: hidden;
}

.wrong span {
    margin-left:30px;
    text-align: left;
    white-space: nowrap;
}

Example that should work in all browsers: http://jsfiddle.net/p8mg8/1/

---

Related Topics