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
Closed

Comments

@MidnightZenith
Copy link

@MidnightZenith 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
Copy link
Collaborator

@cvrebert cvrebert commented Nov 20, 2013

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

Loading

@carasmo
Copy link

@carasmo 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/

Loading

@MidnightZenith
Copy link
Author

@MidnightZenith 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

Loading

@carasmo
Copy link

@carasmo 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/

Loading

@carasmo
Copy link

@carasmo 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

Loading

@carasmo
Copy link

@carasmo 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/

Loading

@MidnightZenith
Copy link
Author

@MidnightZenith MidnightZenith commented Nov 20, 2013

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

Loading

@carasmo
Copy link

@carasmo 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

Loading

@carasmo
Copy link

@carasmo carasmo commented Nov 20, 2013

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

Loading

@mdo
Copy link
Member

@mdo 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.

Loading

@mdo
Copy link
Member

@mdo 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.

Loading

@carasmo
Copy link

@carasmo carasmo commented Dec 9, 2013

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

Loading

@mdo mdo mentioned this issue Dec 15, 2013
@mdo mdo closed this in 432b9f9 Dec 15, 2013
@mdo
Copy link
Member

@mdo mdo commented Dec 15, 2013

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

Loading

stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
…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
…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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants