From 55ae966573e745de16ee5801739a8bbe34a816f9 Mon Sep 17 00:00:00 2001 From: Michael Prentice Date: Mon, 13 Jul 2020 22:51:19 -0400 Subject: [PATCH] docs: fix numerous IE11 layout issues - most of them have to do with IE11's poor support for nested `layout="column"` elements - remove some unnecessary wrapper `
` elements - remove unused CSS - fix CSS file with SCSS content - simplify some CSS and remove some usages of `layout` and `layout-align` --- docs/app/css/style.css | 4 +- docs/config/template/index.template.html | 2 +- package.json | 2 +- .../autocomplete/demoBasicUsage/index.html | 2 +- .../demoCustomTemplate/index.html | 2 +- .../autocomplete/demoFloatingLabel/index.html | 2 +- .../autocomplete/demoInsideDialog/index.html | 3 +- .../autocomplete/demoRepeatMode/index.html | 192 +++++++++--------- .../checkbox/demoBasicUsage/index.html | 3 +- .../checkbox/demoBasicUsage/style.css | 7 - .../checkbox/demoSelectAll/index.html | 45 ++-- .../checkbox/demoSelectAll/style.css | 23 +-- .../checkbox/demoSyncing/index.html | 55 +++-- src/components/checkbox/demoSyncing/style.css | 11 +- .../content/demoBasicUsage/index.html | 3 - .../content/demoBasicUsage/style.css | 1 - .../menuBar/demoBasicUsage/index.html | 2 +- .../menuBar/demoBasicUsage/style.scss | 34 ++-- .../menuBar/demoDynamicNestedMenus/index.html | 2 +- .../menuBar/demoDynamicNestedMenus/style.scss | 34 ++-- .../demoBasicUsage/index.html | 4 +- src/components/select/demoTrackBy/index.html | 2 +- .../toast/demoCustomUsage/style.scss | 3 + .../toast/demoCustomUsage/toast-template.html | 2 +- .../toolbar/demoBasicUsage/index.html | 3 +- .../toolbar/demoBasicUsage/style.scss | 1 + 26 files changed, 201 insertions(+), 243 deletions(-) diff --git a/docs/app/css/style.css b/docs/app/css/style.css index 29f868110cb..872814c9f3b 100644 --- a/docs/app/css/style.css +++ b/docs/app/css/style.css @@ -519,14 +519,12 @@ md-tabs.demo-source-tabs .active md-tab-label { .small-demo .demo-content { min-height: 128px; } - .doc-content > * { flex: 1 1 auto; } .demo-content > * { - flex: 1 1 0; + flex: 1 1 100%; } - .demo-content > div[layout-fill] { min-height: 448px; } diff --git a/docs/config/template/index.template.html b/docs/config/template/index.template.html index 12e631e151c..6248f50d167 100644 --- a/docs/config/template/index.template.html +++ b/docs/config/template/index.template.html @@ -151,7 +151,7 @@

- +
diff --git a/package.json b/package.json index 67270ead29e..98840c5b889 100644 --- a/package.json +++ b/package.json @@ -132,4 +132,4 @@ "node": ">=10", "npm": ">=6" } -} \ No newline at end of file +} diff --git a/src/components/autocomplete/demoBasicUsage/index.html b/src/components/autocomplete/demoBasicUsage/index.html index 8bb8cd24d2a..4e337f298bc 100644 --- a/src/components/autocomplete/demoBasicUsage/index.html +++ b/src/components/autocomplete/demoBasicUsage/index.html @@ -1,4 +1,4 @@ -
+

diff --git a/src/components/autocomplete/demoCustomTemplate/index.html b/src/components/autocomplete/demoCustomTemplate/index.html index 1540796902f..4d4874bc552 100644 --- a/src/components/autocomplete/demoCustomTemplate/index.html +++ b/src/components/autocomplete/demoCustomTemplate/index.html @@ -1,4 +1,4 @@ -

+

Use <md-autocomplete> with custom templates to show styled autocomplete results.

diff --git a/src/components/autocomplete/demoFloatingLabel/index.html b/src/components/autocomplete/demoFloatingLabel/index.html index 0b25deab215..71af5308e5c 100644 --- a/src/components/autocomplete/demoFloatingLabel/index.html +++ b/src/components/autocomplete/demoFloatingLabel/index.html @@ -1,4 +1,4 @@ -
+

The following example demonstrates floating labels being used as a normal form element.

diff --git a/src/components/autocomplete/demoInsideDialog/index.html b/src/components/autocomplete/demoInsideDialog/index.html index 6e292869183..8c9dd107a3f 100644 --- a/src/components/autocomplete/demoInsideDialog/index.html +++ b/src/components/autocomplete/demoInsideDialog/index.html @@ -1,9 +1,8 @@ -
+

Click the button below to open the dialog with an autocomplete.

- Open Dialog
diff --git a/src/components/autocomplete/demoRepeatMode/index.html b/src/components/autocomplete/demoRepeatMode/index.html index 45cca4943b6..4267e449edf 100644 --- a/src/components/autocomplete/demoRepeatMode/index.html +++ b/src/components/autocomplete/demoRepeatMode/index.html @@ -1,103 +1,101 @@ -
- -
-
- -

- Specify the md-mode as standard to fall back to - ng-repeat for the autocomplete options. This allows - options in the list to have varying heights. Note that large lists in - standard mode will have a negative performance impact - on your application. -

-

Standard mode

- - - - - {{item.name}} + +
+
+ +

+ Specify the md-mode as standard to fall back to + ng-repeat for the autocomplete options. This allows + options in the list to have varying heights. Note that large lists in + standard mode will have a negative performance impact + on your application. +

+

Standard mode

+ + + + + {{item.name}} + +

{{item.desc}}

+ + + {{item.watchers}} watchers -

{{item.desc}}

- - - {{item.watchers}} watchers - - - {{item.forks}} forks - + + {{item.forks}} forks - - - -
+ + + + +
-
-
-

- Omit the md-mode attribute (or specify virtual) to - use md-virtual-repeat for the autocomplete options. - Virtual repeat - renders only enough DOM nodes to fill the container, recycling them as the - user scrolls. This provides smooth and performant scrolling through large - lists of options. Note that all options in a md-virtual-repeat - list must have the same height. -

-

Virtual mode

- - - - - {{item.name}} +
+ +

+ Omit the md-mode attribute (or specify virtual) to + use md-virtual-repeat for the autocomplete options. + Virtual repeat + renders only enough DOM nodes to fill the container, recycling them as the + user scrolls. This provides smooth and performant scrolling through large + lists of options. Note that all options in a md-virtual-repeat + list must have the same height. +

+

Virtual mode

+ + + + + {{item.name}} + +

+ {{item.desc | limitTo:40}}{{item.desc.length > 40 ? '...': ''}} +

+ + + {{item.watchers}} watchers -

- {{item.desc | limitTo:40}}{{item.desc.length > 40 ? '...': ''}} -

- - - {{item.watchers}} watchers - - - {{item.forks}} forks - + + {{item.forks}} forks - - - -
+ + +
+
- -
+
+ diff --git a/src/components/checkbox/demoBasicUsage/index.html b/src/components/checkbox/demoBasicUsage/index.html index bcaa529ec88..79d280e9b4e 100644 --- a/src/components/checkbox/demoBasicUsage/index.html +++ b/src/components/checkbox/demoBasicUsage/index.html @@ -1,9 +1,8 @@ -
Using <ng-model> -
+
Checkbox 1: {{ data.cb1 }} diff --git a/src/components/checkbox/demoBasicUsage/style.css b/src/components/checkbox/demoBasicUsage/style.css index bf48b309e5d..79831e6ae6b 100644 --- a/src/components/checkbox/demoBasicUsage/style.css +++ b/src/components/checkbox/demoBasicUsage/style.css @@ -1,11 +1,9 @@ div.flex-xs { min-height:40px; - } .checkboxDemo1 div { clear: both; } - p { padding-left: 8px; } @@ -16,11 +14,6 @@ fieldset.standard { legend { color: #3F51B5; } -legend code { - color: #3F51B5; - font-weight: normal; -} - .ipsum { color: saddlebrown; } diff --git a/src/components/checkbox/demoSelectAll/index.html b/src/components/checkbox/demoSelectAll/index.html index 7fb8322b1cc..7958ec0715f 100644 --- a/src/components/checkbox/demoSelectAll/index.html +++ b/src/components/checkbox/demoSelectAll/index.html @@ -1,29 +1,20 @@ -
-
-
-
- -
- Using <md-checkbox> with the 'indeterminate' attribute -
-
- - Un-Select All - -
-
- - {{ item }} - -
-
-
+
+ +
+ Using <md-checkbox> with the 'indeterminate' attribute + + Un-Select All + +
+ + {{ item }} +
-
+
diff --git a/src/components/checkbox/demoSelectAll/style.css b/src/components/checkbox/demoSelectAll/style.css index c26e656e05f..a1fffb9d111 100644 --- a/src/components/checkbox/demoSelectAll/style.css +++ b/src/components/checkbox/demoSelectAll/style.css @@ -1,15 +1,10 @@ -.demo { - &-legend { - color: #3F51B5; - } - - &-fieldset { - border-style: solid; - border-width: 1px; - height: 100%; - } - - &-select-all-checkboxes { - padding-left: 30px; - } +legend { + color: #3F51B5; +} +fieldset { + border-style: solid; + border-width: 1px; +} +.demo-select-all-checkboxes { + padding-left: 30px; } diff --git a/src/components/checkbox/demoSyncing/index.html b/src/components/checkbox/demoSyncing/index.html index 322492cf2a7..d515cb60276 100644 --- a/src/components/checkbox/demoSyncing/index.html +++ b/src/components/checkbox/demoSyncing/index.html @@ -1,40 +1,35 @@
-
-
- -
- Using <md-checkbox> with <ng-checked> -
-
- - {{ item }} selected - -
+ +
+ Using <md-checkbox> with <ng-checked> +
+
+ + {{ item }} selected +
-
-
+
+
-
-
- Using <input type="checkbox"> -
-
- -
+
+ Using <input type="checkbox"> +
+
+
-
-
+
+
@@ -42,6 +37,4 @@

Selected Items

{{selected | json}}
- -
diff --git a/src/components/checkbox/demoSyncing/style.css b/src/components/checkbox/demoSyncing/style.css index b539452e1cc..864b6256a4b 100644 --- a/src/components/checkbox/demoSyncing/style.css +++ b/src/components/checkbox/demoSyncing/style.css @@ -4,25 +4,16 @@ legend { color: #3F51B5; } -legend code { - color: #3F51B5; - font-weight: normal; -} p { padding-left: 8px; } - .info { padding-left: 13px; } - div.standard { - padding: 8px; - padding-left: 15px; + padding: 8px 8px 8px 15px; } - fieldset.standard { border-style: solid; border-width: 1px; - height: 100%; } diff --git a/src/components/content/demoBasicUsage/index.html b/src/components/content/demoBasicUsage/index.html index 9b7db25161c..72224a4cb0e 100644 --- a/src/components/content/demoBasicUsage/index.html +++ b/src/components/content/demoBasicUsage/index.html @@ -1,4 +1,3 @@ -
@@ -48,7 +47,5 @@

Toolbar: md-warn

Duo at aliquid mnesarchum, nec ne impetus hendrerit. Ius id aeterno debitis atomorum, et sed feugait voluptua, brute tibique no vix. Eos modo esse ex, ei omittam imperdiet pro. Vel assum albucius incorrupte no. Vim viris prompta repudiare ne, vel ut viderer scripserit, dicant appetere argumentum mel ea. Eripuit feugait tincidunt pri ne, cu facilisi molestiae usu.

- -
diff --git a/src/components/content/demoBasicUsage/style.css b/src/components/content/demoBasicUsage/style.css index 1afda30c18e..ac9648099d2 100644 --- a/src/components/content/demoBasicUsage/style.css +++ b/src/components/content/demoBasicUsage/style.css @@ -1,4 +1,3 @@ - div.demo-content { height: 450px; } diff --git a/src/components/menuBar/demoBasicUsage/index.html b/src/components/menuBar/demoBasicUsage/index.html index f0413e03e15..05edc3a2aba 100644 --- a/src/components/menuBar/demoBasicUsage/index.html +++ b/src/components/menuBar/demoBasicUsage/index.html @@ -1,7 +1,7 @@
- +
diff --git a/src/components/menuBar/demoBasicUsage/style.scss b/src/components/menuBar/demoBasicUsage/style.scss index 64e8850fe5b..95803f8f58e 100644 --- a/src/components/menuBar/demoBasicUsage/style.scss +++ b/src/components/menuBar/demoBasicUsage/style.scss @@ -1,21 +1,23 @@ +md-toolbar-filler { + display: flex; +} .page-container { padding: 32px; -} -.page { - margin: 0 auto; - padding: 24px; - max-width: 680px; - box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); -} - -.page h1 { - text-align: center; - font-size: 1.8rem; - margin-top: 0; - font-weight: normal; -} + .page { + margin: 0 auto; + padding: 24px; + max-width: 680px; + box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); -.page p { - line-height: 1.6rem; + h1 { + text-align: center; + font-size: 1.8rem; + margin-top: 0; + font-weight: normal; + } + p { + line-height: 1.6rem; + } + } } diff --git a/src/components/menuBar/demoDynamicNestedMenus/index.html b/src/components/menuBar/demoDynamicNestedMenus/index.html index c27587ea43c..fda1cf1e2a5 100644 --- a/src/components/menuBar/demoDynamicNestedMenus/index.html +++ b/src/components/menuBar/demoDynamicNestedMenus/index.html @@ -1,7 +1,7 @@
- +
diff --git a/src/components/menuBar/demoDynamicNestedMenus/style.scss b/src/components/menuBar/demoDynamicNestedMenus/style.scss index 64e8850fe5b..95803f8f58e 100644 --- a/src/components/menuBar/demoDynamicNestedMenus/style.scss +++ b/src/components/menuBar/demoDynamicNestedMenus/style.scss @@ -1,21 +1,23 @@ +md-toolbar-filler { + display: flex; +} .page-container { padding: 32px; -} -.page { - margin: 0 auto; - padding: 24px; - max-width: 680px; - box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); -} - -.page h1 { - text-align: center; - font-size: 1.8rem; - margin-top: 0; - font-weight: normal; -} + .page { + margin: 0 auto; + padding: 24px; + max-width: 680px; + box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.25); -.page p { - line-height: 1.6rem; + h1 { + text-align: center; + font-size: 1.8rem; + margin-top: 0; + font-weight: normal; + } + p { + line-height: 1.6rem; + } + } } diff --git a/src/components/progressCircular/demoBasicUsage/index.html b/src/components/progressCircular/demoBasicUsage/index.html index e6422c59dc1..416323375b7 100644 --- a/src/components/progressCircular/demoBasicUsage/index.html +++ b/src/components/progressCircular/demoBasicUsage/index.html @@ -1,5 +1,4 @@ -
- +

Determinate

@@ -61,5 +60,4 @@
Off
On
 -
diff --git a/src/components/select/demoTrackBy/index.html b/src/components/select/demoTrackBy/index.html index 9dec7e3f8dc..857427ec547 100644 --- a/src/components/select/demoTrackBy/index.html +++ b/src/components/select/demoTrackBy/index.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/components/toast/demoCustomUsage/style.scss b/src/components/toast/demoCustomUsage/style.scss index 75131efa74d..cb95008ef1f 100644 --- a/src/components/toast/demoCustomUsage/style.scss +++ b/src/components/toast/demoCustomUsage/style.scss @@ -7,3 +7,6 @@ padding-right: 10px; } } +.md-toast-text { + flex: 1 0 88px; +} diff --git a/src/components/toast/demoCustomUsage/toast-template.html b/src/components/toast/demoCustomUsage/toast-template.html index 35125edeacf..6bc0f57c2d6 100644 --- a/src/components/toast/demoCustomUsage/toast-template.html +++ b/src/components/toast/demoCustomUsage/toast-template.html @@ -1,5 +1,5 @@ - {{ctrl.toastMessage}} + {{ctrl.toastMessage}} Press Escape to dismiss. Press Control-"{{ctrl.dialogKey}}" for diff --git a/src/components/toolbar/demoBasicUsage/index.html b/src/components/toolbar/demoBasicUsage/index.html index 4aa9295e268..dd062e17bb9 100644 --- a/src/components/toolbar/demoBasicUsage/index.html +++ b/src/components/toolbar/demoBasicUsage/index.html @@ -1,7 +1,6 @@

-
@@ -40,7 +39,7 @@

Toolbar with Standard Buttons and a Mini FAB

- +

diff --git a/src/components/toolbar/demoBasicUsage/style.scss b/src/components/toolbar/demoBasicUsage/style.scss index 64ae42633e0..e1d86296547 100644 --- a/src/components/toolbar/demoBasicUsage/style.scss +++ b/src/components/toolbar/demoBasicUsage/style.scss @@ -5,6 +5,7 @@ md-toolbar { } } md-toolbar-filler { + display: flex; background-color: #e0e0e0; // grey 200 #filler-icon {