inline labels

ionic/components/form/label.scss

@@ -6,6 +6,16 @@ $input-label-color:         #444 !default;
 
 
 .input-label {
+  display: block;
+  max-width: 200px;
+  //width: 30%;
+  //min-width: 100px;
+  color: $input-label-color;
+  font-size: inherit;
+  white-space: nowrap;
+}
+
+.fixed-inline-label  {
   display: block;
   max-width: 200px;
   width: 30%;

ionic/components/form/test/fixed-inline-labels/main.html

@@ -0,0 +1,71 @@
+
+<ion-toolbar><ion-title>Fixed Inline Label Text Input</ion-title></ion-toolbar>
+
+
+<ion-content>
+
+  <ion-list>
+
+    <ion-input>
+      <label class="fixed-inline-label">To</label>
+      <input value="Text 1" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">CC</label>
+      <input value="Text 2" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">From</label>
+      <input value="3" type="number">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Comments</label>
+      <textarea>Textarea 4</textarea>
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Message</label>
+      <input value="http://url5.com/" type="url">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Email</label>
+      <input value="email6@email.com" type="email">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Feedback</label>
+      <textarea>Textarea 7</textarea>
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">More Info</label>
+      <input value="Text 8" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Rank</label>
+      <input value="9" type="number">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Message</label>
+      <textarea>Textarea 10</textarea>
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">First Name</label>
+      <input value="Text 11" type="text">
+    </ion-input>
+
+    <ion-input>
+      <label class="fixed-inline-label">Last Name</label>
+      <input value="12" type="number">
+    </ion-input>
+
+  </ion-list>
+
+</ion-content>

ionic/components/form/test/inline-labels/main.html

@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Labelled Text Input</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Inline Label Text Input</ion-title></ion-toolbar>
 
 
 <ion-content>
@@ -7,78 +7,65 @@
   <ion-list>
 
     <ion-input>
-      <label>Label 1</label>
+      <label>To:</label>
       <input value="Text 1" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 2</label>
+      <label>CC:</label>
       <input value="Text 2" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 3</label>
+      <label>From:</label>
       <input value="3" type="number">
     </ion-input>
 
     <ion-input>
-      <label>Label 4</label>
+      <label>Comments:</label>
       <textarea>Textarea 4</textarea>
     </ion-input>
 
     <ion-input>
-      <label>Label 5</label>
+      <label>Message:</label>
       <input value="http://url5.com/" type="url">
     </ion-input>
 
     <ion-input>
-      <label>Label 6</label>
+      <label>Email:</label>
       <input value="email6@email.com" type="email">
     </ion-input>
 
     <ion-input>
-      <label>Label 7</label>
+      <label>Feedback:</label>
       <textarea>Textarea 7</textarea>
     </ion-input>
 
     <ion-input>
-      <label>Label 8</label>
+      <label>More Info:</label>
       <input value="Text 8" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 9</label>
+      <label>Rank:</label>
       <input value="9" type="number">
     </ion-input>
 
     <ion-input>
-      <label>Label 10</label>
+      <label>Message:</label>
       <textarea>Textarea 10</textarea>
     </ion-input>
 
     <ion-input>
-      <label>Label 11</label>
+      <label>First Name:</label>
       <input value="Text 11" type="text">
     </ion-input>
 
     <ion-input>
-      <label>Label 12</label>
+      <label>Last Name:</label>
       <input value="12" type="number">
     </ion-input>
 
-    <ion-input>
-      <label>Label 13</label>
-      <textarea>Textarea 13</textarea>
-    </ion-input>
-
-    <ion-input>
-      <label>Label 14</label>
-      <textarea>Textarea 14</textarea>
-    </ion-input>
-
   </ion-list>
 
 </ion-content>
-
-
-<ion-toolbar position="bottom"><ion-title>Footer</ion-title></ion-toolbar>

ionic/components/form/test/placeholder-labels/main.html

@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Placeholder Text Input</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Placeholder Label Text Input</ion-title></ion-toolbar>
 
 
 <ion-content>

ionic/components/form/test/stacked-labels/e2e.ts

@@ -0,0 +1 @@
+

ionic/components/form/test/stacked-labels/index.ts

@@ -0,0 +1,7 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class IonicApp {}

ionic/components/form/test/stacked-labels/main.html

@@ -1,5 +1,5 @@
 
-<ion-toolbar><ion-title>Stack Labelled Text Input</ion-title></ion-toolbar>
+<ion-toolbar><ion-title>Stacked Label Text Input</ion-title></ion-toolbar>
 
 
 <ion-content>

ionic/components/item/item.scss

@@ -72,7 +72,8 @@ button.item.item {
   .item-media + .item-content,
   .item-content + .item-media,
   .item-content + .item-content,
-  icon + .input {
+  icon + .input,
+  .input-label + .input {
     margin-left: 0;
   }
 
@@ -145,7 +146,8 @@ button.item.item {
 
 }
 
-.vertical-align-top {
+.vertical-align-top,
+.item.item-input {
   align-items: flex-start;
 }