Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 55ae966

Browse files
SplaktarSplaktar
committed
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 `<div>` elements - remove unused CSS - fix CSS file with SCSS content - simplify some CSS and remove some usages of `layout` and `layout-align`
1 parent 4178459 commit 55ae966

File tree

26 files changed

+201
-243
lines changed

26 files changed

+201
-243
lines changed

‎docs/app/css/style.css‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -519,14 +519,12 @@ md-tabs.demo-source-tabs .active md-tab-label {
519519
.small-demo .demo-content {
520520
min-height: 128px;
521521
}
522-
523522
.doc-content > * {
524523
flex: 1 1 auto;
525524
}
526525
.demo-content > * {
527-
flex: 1 1 0;
526+
flex: 1 1 100%;
528527
}
529-
530528
.demo-content > div[layout-fill] {
531529
min-height: 448px;
532530
}

‎docs/config/template/index.template.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ <h2 class="md-toolbar-item md-breadcrumb md-headline" tabindex="-1">
151151

152152
</md-toolbar>
153153

154-
<md-content md-scroll-y layout="column" flex>
154+
<md-content md-scroll-y flex>
155155
<div ng-view layout-padding flex="noshrink" class="docs-ng-view" cache-scroll-position></div>
156156

157157
<div layout="row" flex="noshrink" layout-align="center center">

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,4 +132,4 @@
132132
"node": ">=10",
133133
"npm": ">=6"
134134
}
135-
}
135+
}

‎src/components/autocomplete/demoBasicUsage/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
1+
<div ng-controller="DemoCtrl as ctrl" ng-cloak>
22
<md-content class="md-padding">
33
<form ng-submit="$event.preventDefault()">
44
<p id="autocompleteDescription">

‎src/components/autocomplete/demoCustomTemplate/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
1+
<div ng-controller="DemoCtrl as ctrl" ng-cloak>
22
<md-content layout-padding layout="column">
33
<form ng-submit="$event.preventDefault()">
44
<p>Use <code>&lt;md-autocomplete&gt;</code> with custom templates to show styled autocomplete results.</p>

‎src/components/autocomplete/demoFloatingLabel/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
1+
<div ng-controller="DemoCtrl as ctrl" ng-cloak>
22
<md-content class="md-padding">
33
<form ng-submit="$event.preventDefault()" name="searchForm">
44
<p>The following example demonstrates floating labels being used as a normal form element.</p>

‎src/components/autocomplete/demoInsideDialog/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
1+
<div ng-controller="DemoCtrl as ctrl" ng-cloak>
22
<md-content class="md-padding">
33
<p>
44
Click the button below to open the dialog with an autocomplete.
55
</p>
6-
76
<md-button ng-click="ctrl.openDialog($event)" class="md-raised">Open Dialog</md-button>
87
</md-content>
98
</div>

‎src/components/autocomplete/demoRepeatMode/index.html‎

Lines changed: 95 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,101 @@
1-
<div layout="column" ng-cloak>
2-
<md-content class="md-padding">
3-
<div layout="row" layout-xs="column">
4-
<div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
5-
<form ng-submit="$event.preventDefault()">
6-
<p id="standard-autocomplete-description">
7-
Specify the <code>md-mode</code> as <code>standard</code> to fall back to
8-
<code>ng-repeat</code> for the autocomplete options. This allows
9-
options in the list to have varying heights. Note that large lists in
10-
<code>standard</code> mode will have a negative performance impact
11-
on your application.
12-
</p>
13-
<h4>Standard mode</h4>
14-
<md-autocomplete
15-
id="standard-autocomplete"
16-
ng-disabled="ctrl.isDisabled"
17-
md-no-cache="ctrl.noCache"
18-
md-selected-item="ctrl.selectedItem"
19-
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
20-
md-search-text="ctrl.searchText"
21-
md-selected-item-change="ctrl.selectedItemChange(item)"
22-
md-items="item in ctrl.querySearch(ctrl.searchText)"
23-
md-item-text="item.name"
24-
md-min-length="0"
25-
md-escape-options="clear"
26-
input-aria-describedby="standard-autocomplete-description"
27-
input-aria-label="Current Repository"
28-
placeholder="Pick an Angular repository"
29-
md-menu-class="autocomplete-standard-template"
30-
md-menu-container-class="standard-container"
31-
md-mode="standard">
32-
<md-item-template>
33-
<span class="item-title">
34-
<md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
35-
<span> {{item.name}} </span>
1+
<md-content class="md-padding" ng-cloak>
2+
<div layout="row" layout-xs="column">
3+
<div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
4+
<form ng-submit="$event.preventDefault()">
5+
<p id="standard-autocomplete-description">
6+
Specify the <code>md-mode</code> as <code>standard</code> to fall back to
7+
<code>ng-repeat</code> for the autocomplete options. This allows
8+
options in the list to have varying heights. Note that large lists in
9+
<code>standard</code> mode will have a negative performance impact
10+
on your application.
11+
</p>
12+
<h4>Standard mode</h4>
13+
<md-autocomplete
14+
id="standard-autocomplete"
15+
ng-disabled="ctrl.isDisabled"
16+
md-no-cache="ctrl.noCache"
17+
md-selected-item="ctrl.selectedItem"
18+
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
19+
md-search-text="ctrl.searchText"
20+
md-selected-item-change="ctrl.selectedItemChange(item)"
21+
md-items="item in ctrl.querySearch(ctrl.searchText)"
22+
md-item-text="item.name"
23+
md-min-length="0"
24+
md-escape-options="clear"
25+
input-aria-describedby="standard-autocomplete-description"
26+
input-aria-label="Current Repository"
27+
placeholder="Pick an Angular repository"
28+
md-menu-class="autocomplete-standard-template"
29+
md-menu-container-class="standard-container"
30+
md-mode="standard">
31+
<md-item-template>
32+
<span class="item-title">
33+
<md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
34+
<span> {{item.name}} </span>
35+
</span>
36+
<p class="item-desc">{{item.desc}}</p>
37+
<span class="item-metadata">
38+
<span>
39+
<strong>{{item.watchers}}</strong> watchers
3640
</span>
37-
<p class="item-desc">{{item.desc}}</p>
38-
<span class="item-metadata">
39-
<span>
40-
<strong>{{item.watchers}}</strong> watchers
41-
</span>
42-
<span>
43-
<strong>{{item.forks}}</strong> forks
44-
</span>
41+
<span>
42+
<strong>{{item.forks}}</strong> forks
4543
</span>
46-
</md-item-template>
47-
</md-autocomplete>
48-
</form>
49-
</div>
44+
</span>
45+
</md-item-template>
46+
</md-autocomplete>
47+
</form>
48+
</div>
5049

51-
<div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
52-
<form ng-submit="$event.preventDefault()">
53-
<p id="virtual-autocomplete-description">
54-
Omit the <code>md-mode</code> attribute (or specify <code>virtual</code>) to
55-
use <code>md-virtual-repeat</code> for the autocomplete options.
56-
<a ng-href="api/directive/mdVirtualRepeat">Virtual repeat</a>
57-
renders only enough DOM nodes to fill the container, recycling them as the
58-
user scrolls. This provides smooth and performant scrolling through large
59-
lists of options. Note that all options in a <code>md-virtual-repeat</code>
60-
list must have the same height.
61-
</p>
62-
<h4>Virtual mode</h4>
63-
<md-autocomplete
64-
id="virtual-autocomplete"
65-
ng-disabled="ctrl.isDisabled"
66-
md-no-cache="ctrl.noCache"
67-
md-selected-item="ctrl.selectedItem"
68-
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
69-
md-search-text="ctrl.searchText"
70-
md-selected-item-change="ctrl.selectedItemChange(item)"
71-
md-items="item in ctrl.querySearch(ctrl.searchText)"
72-
md-item-text="item.name"
73-
md-min-length="0"
74-
md-escape-options="clear"
75-
input-aria-describedby="virtual-autocomplete-description"
76-
input-aria-label="Current Repository"
77-
placeholder="Pick an Angular repository"
78-
md-menu-class="autocomplete-virtual-template"
79-
md-menu-container-class="virtual-container"
80-
md-mode="virtual">
81-
<md-item-template>
82-
<span class="item-title">
83-
<md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
84-
<span> {{item.name}} </span>
50+
<div class="instance-wrapper" flex-gt-xs="50" ng-controller="DemoCtrl as ctrl">
51+
<form ng-submit="$event.preventDefault()">
52+
<p id="virtual-autocomplete-description">
53+
Omit the <code>md-mode</code> attribute (or specify <code>virtual</code>) to
54+
use <code>md-virtual-repeat</code> for the autocomplete options.
55+
<a ng-href="api/directive/mdVirtualRepeat">Virtual repeat</a>
56+
renders only enough DOM nodes to fill the container, recycling them as the
57+
user scrolls. This provides smooth and performant scrolling through large
58+
lists of options. Note that all options in a <code>md-virtual-repeat</code>
59+
list must have the same height.
60+
</p>
61+
<h4>Virtual mode</h4>
62+
<md-autocomplete
63+
id="virtual-autocomplete"
64+
ng-disabled="ctrl.isDisabled"
65+
md-no-cache="ctrl.noCache"
66+
md-selected-item="ctrl.selectedItem"
67+
md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
68+
md-search-text="ctrl.searchText"
69+
md-selected-item-change="ctrl.selectedItemChange(item)"
70+
md-items="item in ctrl.querySearch(ctrl.searchText)"
71+
md-item-text="item.name"
72+
md-min-length="0"
73+
md-escape-options="clear"
74+
input-aria-describedby="virtual-autocomplete-description"
75+
input-aria-label="Current Repository"
76+
placeholder="Pick an Angular repository"
77+
md-menu-class="autocomplete-virtual-template"
78+
md-menu-container-class="virtual-container"
79+
md-mode="virtual">
80+
<md-item-template>
81+
<span class="item-title">
82+
<md-icon md-svg-icon="img/icons/octicon-repo.svg" aria-hidden="true"></md-icon>
83+
<span> {{item.name}} </span>
84+
</span>
85+
<p class="item-desc">
86+
{{item.desc | limitTo:40}}{{item.desc.length > 40 ? '...': ''}}
87+
</p>
88+
<span class="item-metadata">
89+
<span>
90+
<strong>{{item.watchers}}</strong> watchers
8591
</span>
86-
<p class="item-desc">
87-
{{item.desc | limitTo:40}}{{item.desc.length > 40 ? '...': ''}}
88-
</p>
89-
<span class="item-metadata">
90-
<span>
91-
<strong>{{item.watchers}}</strong> watchers
92-
</span>
93-
<span>
94-
<strong>{{item.forks}}</strong> forks
95-
</span>
92+
<span>
93+
<strong>{{item.forks}}</strong> forks
9694
</span>
97-
</md-item-template>
98-
</md-autocomplete>
99-
</form>
100-
</div>
95+
</span>
96+
</md-item-template>
97+
</md-autocomplete>
98+
</form>
10199
</div>
102-
</md-content>
103-
</div>
100+
</div>
101+
</md-content>

‎src/components/checkbox/demoBasicUsage/index.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
21
<div ng-controller="AppCtrl" class="md-padding" ng-cloak>
32
<div>
43
<fieldset class="standard">
54
<legend>Using &lt;ng-model&gt;</legend>
6-
<div layout-wrap layout-gt-sm="row" >
5+
<div layout-wrap layout-gt-sm="row">
76
<div flex-gt-sm="50">
87
<md-checkbox ng-model="data.cb1" aria-label="Checkbox 1">
98
Checkbox 1: {{ data.cb1 }}

‎src/components/checkbox/demoBasicUsage/style.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
div.flex-xs {
22
min-height:40px;
3-
43
}
54
.checkboxDemo1 div {
65
clear: both;
76
}
8-
97
p {
108
padding-left: 8px;
119
}
@@ -16,11 +14,6 @@ fieldset.standard {
1614
legend {
1715
color: #3F51B5;
1816
}
19-
legend code {
20-
color: #3F51B5;
21-
font-weight: normal;
22-
}
23-
2417
.ipsum {
2518
color: saddlebrown;
2619
}

0 commit comments

Comments
 (0)