CODEWITHSUNDEEP
css
speg
speg

Reputation: 2019

Large font-size in a text-input breaks out of container

I have a text input wrapped inside a inline element which adds some padding and border. But when I increase the font-size the input grows beyond the containing element.

display:flex-inline seems to fix it, but I don't think that has good IE support?

http://jsfiddle.net/3hyjd/1/

How can I make the height of the container automatically adjust? Preferably with IE<9 support.

Upvotes: 1

Views: 1205

Answers (2)

Pablo
Pablo

Reputation: 2305

You can solve this problem setting a max-width:100% to the input. I mean:

input {
  max-width:100%
}

It works cross browser

Upvotes: 0

avrahamcool
avrahamcool

Reputation: 14094

a cleaner approach will be to alter your DOM a little bit, so the support will be from all browsers, without any hack.

see that Working Fiddle

HTML: (span instead of div)

<span class="field">
    <input type="text" />
</span>

CSS:

.field {
    border: 1px solid red;
    padding: 5px;
    display: inline-block;
}

input {
    font-size:1.3em;
}

but, If you cant alter your DOM, use inline-block for the field instead of inline.

in that case, you'll need to apply some fix for it to work in IE6,IE7.

See that Working Fiddle

HTML: (same as yours)

<div class="field">
    <input type="text" />
</div>

CSS:

.field {
    border: 1px solid red;
    padding: 5px;
    display: inline-block;
    /*fix for IE6,IE7*/
    *display: inline;
    zoom: 1;
}

input {
    font-size:1.3em;
}

Upvotes: 1

Related Questions