Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
MidnightZenith opened this Issue Nov 20, 2013 · 13 comments

Comments

Projects
None yet
4 participants
@MidnightZenith
Copy link

MidnightZenith commented Nov 20, 2013

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

This comment has been minimized.

Copy link
Member

cvrebert commented Nov 20, 2013

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

@carasmo

This comment has been minimized.

Copy link

carasmo commented Nov 20, 2013

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

This comment has been minimized.

Copy link
Author

MidnightZenith commented Nov 20, 2013

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)

image

@carasmo

This comment has been minimized.

Copy link

carasmo commented Nov 20, 2013

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

screen shot 2013-11-20 at 3 22 53 pm
http://jsfiddle.net/ns296/6/

@carasmo

This comment has been minimized.

Copy link

carasmo commented Nov 20, 2013

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

screen shot 2013-11-20 at 3 31 51 pm

@carasmo

This comment has been minimized.

Copy link

carasmo commented Nov 20, 2013

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 comment has been minimized.

Copy link
Author

MidnightZenith commented Nov 20, 2013

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

@carasmo

This comment has been minimized.

Copy link

carasmo commented Nov 20, 2013

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

This comment has been minimized.

Copy link

carasmo commented Nov 20, 2013

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

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Nov 28, 2013

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 comment has been minimized.

Copy link
Member

mdo commented Dec 1, 2013

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

This comment has been minimized.

Copy link

carasmo commented Dec 9, 2013

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

@mdo mdo referenced this issue Dec 15, 2013

Closed

v3.1.0 ship list #11734

@mdo mdo closed this in 432b9f9 Dec 15, 2013

@mdo

This comment has been minimized.

Copy link
Member

mdo commented Dec 15, 2013

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

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014

(less) Fixes twbs#11561: Add float: left; to .form-control within inp…
…ut groups to prevent IE9 from screwing up placeholder text and select menu arrows

stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014

(less) Fixes twbs#11561: Add float: left; to .form-control within inp…
…ut groups to prevent IE9 from screwing up placeholder text and select menu arrows
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.