This repository has been archived by the owner on Sep 5, 2024. It is now read-only.
select: icon is wrongly positioned in IE11 #10714
Assignees
Labels
browser: IE
This issue is specific to Internet Explorer
has: Pull Request
A PR has been created to address this issue
P2: required
Issues that must be fixed.
resolution: fixed
type: bug
Milestone
Comments
|
#3840 It seems to have been raised before, although it is clearly not fixed |
Splaktar
changed the title
|
This was tweaked in 70c0c6e, but that only made the carrot not show up under the text. It didn't fix the left-to-right alignment. I'll try out the changes from https://github.com/angular/material/pull/3840/files to see if they are still effective. |
|
PR #11544 posted to fix this. |
mmalerba
pushed a commit
that referenced
this issue
Jan 7, 2019
<!-- Filling out this template is required! Do not delete it when submitting a Pull Request! Without this information, your Pull Request may be auto-closed. --> ## PR Checklist Please check that your PR fulfills the following requirements: - [x] The commit message follows [our guidelines](https://github.com/angular/material/blob/master/.github/CONTRIBUTING.md#-commit-message-format) - [ ] Tests for the changes have been added or this is not a bug fix / enhancement - [x] Docs have been added, updated, or were not required ## PR Type What kind of change does this PR introduce? <!-- Please check the one that applies to this PR using "x". --> ``` [x] Bugfix [ ] Enhancement [ ] Documentation content changes [ ] Code style update (formatting, local variables) [ ] Refactoring (no functional changes, no api changes) [ ] Build related changes [ ] CI related changes [ ] Infrastructure changes [ ] Other... Please describe: ``` ## What is the current behavior? Carrots in `md-select`s are not aligned to the end in IE11 as explained in the issue. <!-- Please describe the current behavior that you are modifying and link to one or more relevant issues. --> Issue Number: Fixes #10714. Relates to #3840. ## What is the new behavior? Carrots are properly positioned in IE11, Edge, Chrome, and Firefox. ## Does this PR introduce a breaking change? ``` [ ] Yes [x] No ``` <!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. --> <!-- Note that breaking changes are highly unlikely to get merged to master unless the validation is clear and the use case is critical. --> ## Other information Thank you to @prestonvanloon for the original fix here in #3840.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Actual Behavior:
What is the issue? *The dropdown icon is in the wrong place in internet explorer
Open the following website in internet explorer:
https://material.angularjs.org/HEAD/demo/select, the icon is very close to the text
it looks like this
What is the expected behavior?Open the page in chrome and firefox, and observe that the drop down icon is at the far right of the select box:
https://material.angularjs.org/HEAD/demo/select
it should look like this
CodePen (or steps to reproduce the issue): *
CodePen Demo which shows your issue:Details:See above, open the page in internet explorer
AngularJS Versions: *
AngularJS Version:AngularJS Material Version:Additional Information:
Browser Type: *Browser Version: *OS: *Stack Traces:Browser: Internet Explorer, Version: 11.0.9600.18665CO
The actual problem is you are using
text-align: endto define the position of the icon, Internet Explorer has no support for using end withtext-align(note Edge also has questionable support according to MDN https://developer.mozilla.org/en-US/docs/Web/CSS/text-align?v=example)Solution
Use
text-align: rightin ltr environments andtext-align: leftin rtl environmentsShortcut to create a new CodePen Demo.
Note:
*indicates required information. Without this information, your issue may be auto-closed.The text was updated successfully, but these errors were encountered: