fix(demo, virtualRepat): make demos responsive.

devversion · ThomasBurleson · commit 13cfa6e803bc · 2016-03-30T12:13:35.000-05:00
* The demos had currently fixed widths and that causes overflow issues on mobile devices. Fixes angular#7333. Closes angular#7749
diff --git a/src/components/virtualRepeat/demoDeferredLoading/style.css b/src/components/virtualRepeat/demoDeferredLoading/style.css
@@ -1,6 +1,7 @@
 #vertical-container {
   height: 292px;
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
 }
 
 .repeated-item {
diff --git a/src/components/virtualRepeat/demoHorizontalUsage/style.css b/src/components/virtualRepeat/demoHorizontalUsage/style.css
@@ -1,6 +1,7 @@
 #horizontal-container {
   height: 100px;
-  width: 830px;
+  width: 100%;
+  max-width: 830px;
 }
 
 .repeated-item {
diff --git a/src/components/virtualRepeat/demoInfiniteScroll/style.css b/src/components/virtualRepeat/demoInfiniteScroll/style.css
@@ -1,6 +1,7 @@
 #vertical-container {
   height: 292px;
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
 }
 
 .repeated-item {
diff --git a/src/components/virtualRepeat/demoScrollTo/style.css b/src/components/virtualRepeat/demoScrollTo/style.css
@@ -1,10 +1,12 @@
 .wrapper {
-    width: 400px;
+  width: 100%;
+  max-width: 400px;
 }
 
 #vertical-container {
   height: 292px;
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
 }
 
 #vertical-container .repeated-item {
diff --git a/src/components/virtualRepeat/demoVerticalUsage/style.css b/src/components/virtualRepeat/demoVerticalUsage/style.css
@@ -1,6 +1,7 @@
 #vertical-container {
   height: 292px;
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
 }
 
 .repeated-item {

Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,12 @@`
`1`	`1`	`.wrapper {`
`2`		`- width: 400px;`
	`2`	`+ width: 100%;`
	`3`	`+ max-width: 400px;`
`3`	`4`	`}`
`4`	`5`
`5`	`6`	`#vertical-container {`
`6`	`7`	`height: 292px;`
`7`		`- width: 400px;`
	`8`	`+ width: 100%;`
	`9`	`+ max-width: 400px;`
`8`	`10`	`}`
`9`	`11`
`10`	`12`	`#vertical-container .repeated-item {`