-
Notifications
You must be signed in to change notification settings - Fork 357
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(IE11): base platform & cocs support for IE11 (#831)
* feat(docs): home IE11 layout & icon flex fixes #199 * feat(navigation-drawer): remove unnecessary flex for IE11 support * feat(styles): overflow-visible on notification button for IE11 support * feat(docs): apply overflow-visible to notification button for IE11 support * feat(docs): height for layout demos for IE11 support * feat(docs): proper rows for inputs for IE11 support * feat(chips): update flex layout for IE11 support * feat(styles): height fix for logo for IE11 support * feat(styles): layout align center overflow fix for IE11 * feat(messages): vertical center wrapper layout=column IE11 fix * feat(docs): search demo layout fix for IE11 support * feat(docs): additional polyfills for NGX-Charts IE11 support * feat(docs): IE11 requirements & best practices * chore(): update yarn.lock with latest dependencies * fix(chips): fix autocomplete click selection for chips * chore(build): add autoprefixer to build process to ensure all css is prefixed for every browser. * chore(): point autoprefixer to IE11 specifically * fix(chips): fix alignment between chips and input (bottom margin) * fix(chips): make sure the template is wrapped in an element so it doesnt get spaced when stacked * fix(): typo in /docs/IE11.md * fix(): loading docs issue in IE11 with loading until boolean usage * feat(prompt-dialog): proper flex layout for IE11 support * feat(docs): proper layout for expansion demo form in IE11 * feat(docs): dynamic form correct responsive layout for IE11 * feat(docs): code-editor: proper demo select flex for IE11 * feat(docs): datatable template demo fix for IE11 * feat(data-table): column heading sorting wrapper to support IE11 * fix(): paging issue with select width
- Loading branch information
1 parent
3ab2fa0
commit fee4182
Showing
35 changed files
with
980 additions
and
690 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| # IE11 Support | ||
|
|
||
| Covalent currently offers experimental IE11 support, but there are some best practices and specific workarounds required in implementation that can't be fixed from the Covalent platform level. | ||
|
|
||
| Reference [philipwalton/flexbugs](https://github.com/philipwalton/flexbugs#flexbugs) for more detailed explanations. | ||
|
|
||
| ## Polyfills | ||
|
|
||
| Ensure you uncomment and add these polyfills in the src/polyfills.ts file of your Angular app: | ||
|
|
||
| ```typescript | ||
| import 'core-js/es6/symbol'; | ||
| import 'core-js/es6/object'; | ||
| import 'core-js/es6/function'; | ||
| import 'core-js/es6/parse-int'; | ||
| import 'core-js/es6/parse-float'; | ||
| import 'core-js/es6/number'; | ||
| import 'core-js/es6/math'; | ||
| import 'core-js/es6/string'; | ||
| import 'core-js/es6/date'; | ||
| import 'core-js/es6/array'; | ||
| import 'core-js/es6/regexp'; | ||
| import 'core-js/es6/map'; | ||
| import 'core-js/es6/weak-map'; | ||
| import 'core-js/es6/set'; | ||
| import 'core-js/es6/reflect'; | ||
| import 'core-js/es7/reflect'; | ||
| import 'zone.js/dist/zone'; | ||
| import 'web-animations-js'; | ||
| import 'core-js/es7/array'; // Needed for NGX-Charts | ||
| import 'classlist.js'; // Needed for NGX-Charts | ||
| ``` | ||
|
|
||
| and add this shim to the bottom of src/polyfills.ts: | ||
|
|
||
| ```typescript | ||
| // Needed for NGX-Charts | ||
| if (typeof SVGElement.prototype.contains === 'undefined') { | ||
| SVGElement.prototype.contains = HTMLDivElement.prototype.contains; | ||
| } | ||
| ``` | ||
|
|
||
| Next, edit your package.json and ensure you have these dependencies (NOTE: the versions will change): | ||
|
|
||
| ```json | ||
| "core-js": "^2.4.1", | ||
| "web-animations-js": "2.2.5", | ||
| "classlist.js": "^1.1.20150312", // Needed for NGX-Charts | ||
| ``` | ||
|
|
||
| ## IE11 Flexbox Workarounds & Best Practices: | ||
|
|
||
| ### Column flex items overflow their container | ||
|
|
||
| You may have to add an extra `<div>` wrapper around child elements in a `layout="column"` | ||
|
|
||
| For example: | ||
|
|
||
| ``` | ||
| <div layout="column"> | ||
| <div> | ||
| <section> | ||
| this was previously overflowing | ||
| </section> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| ref: https://github.com/philipwalton/flexbugs#2-column-flex-items-set-to-align-itemscenter-overflow-their-container | ||
|
|
||
| --- | ||
|
|
||
| ### Column flex items may not align center vertically | ||
|
|
||
| For example, if the flex items in `layout="row" layout-align="start center"` aren't vertically centered, try adding an extra `layout="column"` wrapper | ||
|
|
||
| For example: | ||
|
|
||
| ``` | ||
| <div layout="column"> | ||
| <div layout="row" layout-align="start center"> | ||
| <span> | ||
| centered vertically | ||
| </span> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ### Some components may need flex wrappers if you want flex widths | ||
|
|
||
| For example, `<component-name>` needs a flex wrapper inside a `layout="row"` | ||
|
|
||
| ``` | ||
| <div layout="row"> | ||
| <div flex="40"> | ||
| <component-name></component-name> | ||
| </div> | ||
| </div> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ### Some HTML elements can't be flex containers | ||
|
|
||
| For example, don't use `layout="row"` on `<button md-button>` | ||
|
|
||
| ref: https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers | ||
|
|
||
| --- | ||
|
|
||
| ### Height:auto probably won't work on flex items | ||
|
|
||
| Try to add an explicit height px or % when possible | ||
|
|
||
| For example try this: | ||
|
|
||
| ``` | ||
| .class-name { | ||
| width: 90%; | ||
| height: 90%; | ||
| } | ||
| ``` | ||
|
|
||
| instead of: | ||
|
|
||
| ``` | ||
| .class-name { | ||
| width: 90%; | ||
| height: auto; | ||
| } | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| ### Visible overflow may be necessary | ||
|
|
||
| IE11 will height the overflow of certain element children | ||
|
|
||
| For example, if a parent has a border-radius, the child may be cut off. Use a utility class to reveal the overflow: | ||
|
|
||
| ``` | ||
| <div class="overflow-visible"></div> | ||
| ``` | ||
|
|
||
| --- | ||
|
|
||
| #### Find IE11 bugs? | ||
|
|
||
| Please submit an issue with detailed description and screenshots: | ||
|
|
||
| https://github.com/Teradata/covalent/issues | ||
|
|
||
| Prefix your issue title with: `[IE11] - ` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.