IE9 text input with input-addon pushes prefilled text outside field boundary

[MidnightZenith]

The issue (IE9-specific):
Right-aligned text within a text input field render beyond the field boundary when rendered next to an input-addon. The full value is there (you can manually focus the field and right-arrow to the end of the input value and show the full field value at that point), but renders badly.

See the fiddle: http://jsfiddle.net/ns296/

[cvrebert]

@MidnightZenith Just to rule out one potential cause, your IE is not in Compatibility View mode, correct?

[carasmo]

Long standing problem with padding on inputs and ie9 hiding stuff under the padding, it happens on long left-align text too. Only way to do it is to using zero padding on all elements inside the input-group.

http://jsfiddle.net/ns296/5/

[MidnightZenith]

I'm actually still seeing it with your edits with zero padding
Browser stats: IE
Version: 9.0.8112.16421
Update Versions: 9.0.16 (KB2829530)

[carasmo]

Well that sucks. Apparently it's the width 100%, cause if it's all width auto, it doesn't cut off.

http://jsfiddle.net/ns296/6/

[carasmo]

Yeah. Look the clipping off is equal to the width of the addons and the padding in any given input group.

[carasmo]

See if this works. It's an effed up work around. Can be done with jQuery and with boilerplate's html classes to target just ie.

http://jsfiddle.net/ns296/12/

[MidnightZenith]

This does address the issue. Thanks for the work around, :)

[carasmo]

On StackOverflow just now (http://stackoverflow.com/questions/20471406/select-arrow-hidden-in-bootstrap-3-input-group-in-ie9), the answer is really simple and it doesn't require any markup changes.

This works for select and any addon weirdness in IE9 and doesn't affect decent browsers.

Add a float: left on the .form-control

http://jsbin.com/EBadebIz/2/edit

Before:
http://app.crossbrowsertesting.com/public/i82cbc31d6d6bc2e/livetests/1253582/snapshots/zafc066e6e5964b735bb

Fixed:
http://app.crossbrowsertesting.com/public/i82cbc31d6d6bc2e/livetests/1253587/snapshots/z13994beea94c9eb3905

[carasmo]

Updated above to address the select issue of the same nature.

[mdo]

That long winded, and browser-sniffing-based, solution won't work for us. We don't use that approach anywhere right now. We'll have to find another solution, or punt this as a browser bug and document it as such.

[mdo]

This is less about the width and likely more about the display: table-cell;, but I don't know that there's a way around that at all without something like @carasmo's solution above. A docs warning might be the only thing we can do here.

[carasmo]

Updated the comment with the shitty fix with the simple, no markup, no sniffing fix. #11561 (comment)

[mdo]

@carasmo Nice! Thanks so much for digging in <3.