demos(*): fix inputs spilling over when screen width small (#6155)

* demos(*): fix inputs spilling over when screen width small

* chore(*): fix line break

Author: amcdnl

src/material-examples/autocomplete-display/autocomplete-display-example.css

@@ -1,5 +1,7 @@
 .example-form {
-  width: 500px;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {

src/material-examples/autocomplete-filter/autocomplete-filter-example.css

@@ -1,5 +1,7 @@
 .example-form {
-  width: 500px;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {

src/material-examples/autocomplete-overview/autocomplete-overview-example.css

@@ -1,5 +1,7 @@
 .example-form {
-  width: 500px;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {

src/material-examples/autocomplete-simple/autocomplete-simple-example.css

@@ -1,5 +1,7 @@
 .example-form {
-  width: 500px;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {

src/material-examples/input-errors/input-errors-example.css

@@ -1,6 +1,7 @@
 .example-form {
-  width: 500px;
-  max-width: 100%;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {

src/material-examples/input-form/input-form-example.css

@@ -1,6 +1,7 @@
 .example-form {
-  width: 500px;
-  max-width: 100%;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {

src/material-examples/input-hint/input-hint-example.css

@@ -1,6 +1,7 @@
 .example-form {
-  width: 500px;
-  max-width: 100%;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {

src/material-examples/input-overview/input-overview-example.css

@@ -1 +1,9 @@
-/** No CSS for this example */
+.example-form {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/material-examples/input-overview/input-overview-example.html

@@ -1,3 +1,5 @@
-<md-input-container>
-  <input mdInput placeholder="Favorite food" value="Sushi">
-</md-input-container>
+<form class="example-form">
+  <md-input-container class="example-full-width">
+    <input mdInput placeholder="Favorite food" value="Sushi">
+  </md-input-container>
+</form>

src/material-examples/input-overview/input-overview-example.ts

@@ -5,6 +5,7 @@ import {Component} from '@angular/core';
  */
 @Component({
   selector: 'input-overview-example',
+  styleUrls: ['input-overview-example.css'],
   templateUrl: 'input-overview-example.html',
 })
 export class InputOverviewExample {}

src/material-examples/input-prefix-suffix/input-prefix-suffix-example.css

@@ -1,6 +1,7 @@
 .example-form {
-  width: 500px;
-  max-width: 100%;
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
 }
 
 .example-full-width {