due to css ~ adjacent sibling connector, existing <label> elements must be reordered after the input for floating labels to work.

dist/css/material-fullpalette.css

@@ -20653,7 +20653,7 @@ fieldset[disabled] .form-control {
 }
 .input-lg + .floating-label {
   font-size: 18px;
-  top: 10px;
+  top: 7px;
 }
 .form-control.input-lg:focus ~ .floating-label,
 .form-control.input-lg:not(.empty) ~ .floating-label {

dist/css/material.css

@@ -4959,7 +4959,7 @@ fieldset[disabled] .form-control {
 }
 .input-lg + .floating-label {
   font-size: 18px;
-  top: 10px;
+  top: 7px;
 }
 .form-control.input-lg:focus ~ .floating-label,
 .form-control.input-lg:not(.empty) ~ .floating-label {

dist/js/material.js

@@ -79,9 +79,6 @@
           formGroup = $input.wrap("<div class='form-group'></div>");
         }
 
-        //
-        formGroup.append("<span class='material-input'></span>");
-
         // Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
         if ($input.hasClass("floating-label")) {
           var placeholder = $input.attr("placeholder");
@@ -93,6 +90,16 @@
           }
           $input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
         }
+        else {
+          // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
+          //  we need the label to be *after* the input for it to work properly.
+          //  See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
+          var $label = formGroup.find("label.floating-label");
+          if($label.length > 0){
+            $label.detach();
+            $input.after($label);
+          }
+        }
 
         // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
         if ($input.attr("data-hint")) {
@@ -104,6 +111,9 @@
           $input.addClass("empty");
         }
 
+        // Add at the end of the form-group
+        formGroup.append("<span class='material-input'></span>");
+
         // Support for file input
         if (formGroup.next().is("[type=file]")) {
           formGroup.addClass("fileinput");

dist/js/material.min.js

@@ -1,2 +1,2 @@
-!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.parent(".form-group");if(0===c.length&&(c=b.wrap("<div class='form-group'></div>")),c.append("<span class='material-input'></span>"),b.hasClass("floating-label")){var d=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var e=b.attr("id"),f="";e&&(f="for='"+e+"'"),b.after("<label "+f+"class='floating-label'>"+d+"</label>")}if(b.attr("data-hint")&&b.after("<p class='help-block hint'>"+b.attr("data-hint")+"</p>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),c.next().is("[type=file]")){c.addClass("fileinput");var g=c.next().detach();b.after(g)}})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""!==b.val()||"undefined"!=typeof b[0].checkValidity&&!b[0].checkValidity()?b.removeClass("empty"):b.addClass("empty")}).on("focus",".form-group.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-group.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-group.fileinput [type=file]",function(){var b=a(this),c="";a.each(this.files,function(a,b){c+=b.name+", "}),c=c.substring(0,c.length-2),c?b.prev().removeClass("empty"):b.prev().addClass("empty"),b.prev().val(c)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur","input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
+!function(a){function b(a){return"undefined"==typeof a.which?!0:"number"==typeof a.which&&a.which>0?!a.ctrlKey&&!a.metaKey&&!a.altKey&&8!=a.which&&9!=a.which:!1}a.expr[":"].notmdproc=function(b){return a(b).data("mdproc")?!1:!0},a.material={options:{input:!0,ripples:!0,checkbox:!0,togglebutton:!0,radio:!0,arrive:!0,autofill:!1,withRipples:[".btn:not(.btn-link)",".card-image",".navbar a:not(.withoutripple)",".dropdown-menu a",".nav-tabs a:not(.withoutripple)",".withripple",".pagination li:not(.active):not(.disabled) a:not(.withoutripple)"].join(","),inputElements:"input.form-control, textarea.form-control, select.form-control",checkboxElements:".checkbox > label > input[type=checkbox]",togglebuttonElements:".togglebutton > label > input[type=checkbox]",radioElements:".radio > label > input[type=radio]"},checkbox:function(b){a(b?b:this.options.checkboxElements).filter(":notmdproc").data("mdproc",!0).after("<span class=checkbox-material><span class=check></span></span>")},togglebutton:function(b){a(b?b:this.options.togglebuttonElements).filter(":notmdproc").data("mdproc",!0).after("<span class=toggle></span>")},radio:function(b){a(b?b:this.options.radioElements).filter(":notmdproc").data("mdproc",!0).after("<span class=circle></span><span class=check></span>")},input:function(b){a(b?b:this.options.inputElements).filter(":notmdproc").data("mdproc",!0).each(function(){var b=a(this),c=b.parent(".form-group");if(0===c.length&&(c=b.wrap("<div class='form-group'></div>")),b.hasClass("floating-label")){var d=b.attr("placeholder");b.attr("placeholder",null).removeClass("floating-label");var e=b.attr("id"),f="";e&&(f="for='"+e+"'"),b.after("<label "+f+"class='floating-label'>"+d+"</label>")}else{var g=c.find("label.floating-label");g.length>0&&(g.detach(),b.after(g))}if(b.attr("data-hint")&&b.after("<p class='help-block hint'>"+b.attr("data-hint")+"</p>"),(null===b.val()||"undefined"==b.val()||""===b.val())&&b.addClass("empty"),c.append("<span class='material-input'></span>"),c.next().is("[type=file]")){c.addClass("fileinput");var h=c.next().detach();b.after(h)}})},attachInputEventHandlers:function(){a(document).on("change",".checkbox input[type=checkbox]",function(){a(this).blur()}).on("keydown paste",".form-control",function(c){b(c)&&a(this).removeClass("empty")}).on("keyup change",".form-control",function(){var b=a(this);""!==b.val()||"undefined"!=typeof b[0].checkValidity&&!b[0].checkValidity()?b.removeClass("empty"):b.addClass("empty")}).on("focus",".form-group.fileinput",function(){a(this).find("input").addClass("focus")}).on("blur",".form-group.fileinput",function(){a(this).find("input").removeClass("focus")}).on("change",".form-group.fileinput [type=file]",function(){var b=a(this),c="";a.each(this.files,function(a,b){c+=b.name+", "}),c=c.substring(0,c.length-2),c?b.prev().removeClass("empty"):b.prev().addClass("empty"),b.prev().val(c)})},ripples:function(b){a(b?b:this.options.withRipples).ripples()},autofill:function(){var b=setInterval(function(){a("input[type!=checkbox]").each(function(){var b=a(this);b.val()&&b.val()!==b.attr("value")&&b.trigger("change")})},100);setTimeout(function(){clearInterval(b)},1e4)},attachAutofillEventHandlers:function(){var b;a(document).on("focus","input",function(){var c=a(this).parents("form").find("input").not("[type=file]");b=setInterval(function(){c.each(function(){var b=a(this);b.val()!==b.attr("value")&&b.trigger("change")})},100)}).on("blur","input",function(){clearInterval(b)})},init:function(){var b=a(document);a.fn.ripples&&this.options.ripples&&this.ripples(),this.options.input&&(this.input(),this.attachInputEventHandlers()),this.options.checkbox&&this.checkbox(),this.options.togglebutton&&this.togglebutton(),this.options.radio&&this.radio(),this.options.autofill&&(this.autofill(),this.attachAutofillEventHandlers()),document.arrive&&this.options.arrive&&(a.fn.ripples&&this.options.ripples&&b.arrive(this.options.withRipples,function(){a.material.ripples(a(this))}),this.options.input&&b.arrive(this.options.inputElements,function(){a.material.input(a(this))}),this.options.checkbox&&b.arrive(this.options.checkboxElements,function(){a.material.checkbox(a(this))}),this.options.radio&&b.arrive(this.options.radioElements,function(){a.material.radio(a(this))}),this.options.togglebutton&&b.arrive(this.options.togglebuttonElements,function(){a.material.togglebutton(a(this))}))}}}(jQuery);
 //# sourceMappingURL=material.min.js.map

dist/js/material.min.js.map

@@ -1 +1 @@
-{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","formGroup","parent","length","wrap","append","hasClass","placeholder","attr","removeClass","id","forAttribute","val","addClass","next","is","$nextInput","detach","attachInputEventHandlers","document","on","blur","e","$this","checkValidity","find","value","files","i","file","name","substring","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}
+{"version":3,"sources":["material.js"],"names":["$","_isChar","evt","which","ctrlKey","metaKey","altKey","expr","notmdproc","obj","data","material","options","input","ripples","checkbox","togglebutton","radio","arrive","autofill","withRipples","join","inputElements","checkboxElements","togglebuttonElements","radioElements","selector","this","filter","after","each","$input","formGroup","parent","length","wrap","hasClass","placeholder","attr","removeClass","id","forAttribute","$label","find","detach","val","addClass","append","next","is","$nextInput","attachInputEventHandlers","document","on","blur","e","$this","checkValidity","value","files","i","file","name","substring","prev","loading","setInterval","trigger","setTimeout","clearInterval","attachAutofillEventHandlers","focused","$inputs","parents","not","init","$document","fn","jQuery"],"mappings":"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","file":"material.min.js"}

index.html

@@ -495,7 +495,6 @@
             <div class="form-group">
               <label for="i1" class="not-floating">Static label</label>
               <input type="email" class="form-control" id="i1" placeholder="Placeholder text">
-
               <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
             </div>
 
@@ -505,10 +504,8 @@
               <span class="help-block hint">This is a hint as a <code>span.help-block.hint</code></span>
             </div>
 
-            <!--<div class="form-group">-->
             <!-- Exercise backwards compatibility without form-group -->
-            <input type="text" class="form-control floating-label" placeholder="Legacy floating label" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">
+            <input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy <code>data-hint</code> attribute on the input">
-            <!--</div>-->
 
             <h2>Textarea</h2>
 

less/_inputs.less

@@ -3,11 +3,14 @@
   .form-control {
     box-shadow: none;
   }
-  .material-input:focus, .form-control:focus, .form-control.focus {
+  .material-input:focus,
+  .form-control:focus,
+  .form-control.focus {
     background-image: linear-gradient(@color, @color), linear-gradient(@input-underline-color, @input-underline-color);
     box-shadow: none;
   }
-  .control-label, input.form-control:focus ~ .floating-label {
+  .control-label,
+  input.form-control:focus ~ .floating-label {
     color: @color;
   }
 }
@@ -75,6 +78,20 @@
   }
 }
 
+// shared sizing
+.input-floating-label-size(@name, @size) {
+
+  .@{name} + & {
+    font-size: @size;
+    top: 7px;
+  }
+  .form-control.@{name}:focus ~ &,
+  .form-control.@{name}:not(.empty) ~ & {
+    top: @floating-label-size-ratio * -@size;
+    font-size: @floating-label-size-ratio * @size;
+  }
+}
+
 .floating-label {
   color: @input-placeholder-color;
   position: absolute;
@@ -84,31 +101,15 @@
   transition: 0.3s ease all;
   font-size: @font-size-base; // Input sizes
 
+  // sizing
   .form-control:focus ~ &,
   .form-control:not(.empty) ~ & {
     top: @floating-label-size-ratio * -@font-size-base;
     font-size: @floating-label-size-ratio * @font-size-base;
   }
 
-  .input-sm + & { // small
+  .input-floating-label-size(input-sm, @font-size-small);
-    font-size: @font-size-small;
+  .input-floating-label-size(input-lg, @font-size-large);
-    top: 7px;
-  }
-  .form-control.input-sm:focus ~ &,
-  .form-control.input-sm:not(.empty) ~ & {
-    top: @floating-label-size-ratio * -@font-size-small;
-    font-size: @floating-label-size-ratio * @font-size-small;
-  }
-
-  .input-lg + & {
-    font-size: @font-size-large;
-    top: 10px;
-  }
-  .form-control.input-lg:focus ~ &,
-  .form-control.input-lg:not(.empty) ~ & {
-    top: @floating-label-size-ratio * -@font-size-large;
-    font-size: @floating-label-size-ratio * @font-size-large;
-  }
 
   .form-control:focus ~ & {
     color: @primary;

sass/_inputs.scss

@@ -5,41 +5,18 @@
   .form-control {
     box-shadow: none;
   }
-  .material-input:focus, .form-control:focus, .form-control.focus {
+  .material-input:focus,
+  .form-control:focus,
+  .form-control.focus {
     background-image: linear-gradient($color, $color), linear-gradient($input-underline-color, $input-underline-color);
     box-shadow: none;
   }
-  .control-label, input.form-control:focus ~ .floating-label {
+  .control-label,
+  input.form-control:focus + .floating-label {
     color: $color;
   }
 }
 
-fieldset[disabled] .form-control, .form-control {
-  &, &:focus, &.focus {
-    padding: 0;
-    float: none;
-    border: 0;
-    box-shadow: none;
-    border-radius: 0;
-    &:disabled {
-      border-style: dashed;
-      border-bottom: 1px solid #757575;
-    }
-  }
-}
-
-fieldset[disabled] .form-control, .form-control {
-  &:textarea {
-    height: 40px;
-  }
-}
-
-select[multiple].form-control {
-  &, &:focus, &.focus {
-    height: 85px;
-  }
-}
-
 .form-control {
   border: 0;
   background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
@@ -58,24 +35,34 @@ select[multiple].form-control {
   &:-ms-input-placeholder {
     color: $input-placeholder-color;
   }
+
+  fieldset[disabled] &, & {
+    &:textarea {
+      height: 40px;
     }
-.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+
+    &, &:focus, &.focus {
+      padding: 0;
+      float: none;
+      border: 0;
+      box-shadow: none;
+      border-radius: 0;
+      &:disabled {
+        border-style: dashed;
+        border-bottom: 1px solid #757575;
+      }
+    }
+  }
+
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
     background-color: transparent;
     background-color: rgba(0, 0, 0, 0);
   }
-fieldset[disabled] .form-control:disabled,
-.form-group .form-control:disabled,
-.form-control:disabled,
-fieldset[disabled] .form-control:focus:disabled,
-.form-group .form-control:focus:disabled,
-.form-control:focus:disabled,
-fieldset[disabled] .form-control.focus:disabled,
-.form-group .form-control.focus:disabled,
-.form-control.focus:disabled {
-  border: 0; // Ugly override of Bootstrap border
-}
 
-.form-control:focus, .form-control.focus {
+  &:focus,
+  &.focus {
     outline: none;
     background-image: linear-gradient($primary, $primary), linear-gradient($input-underline-color, $input-underline-color);
     background-size: 100% 2px, 100% 1px;
@@ -83,9 +70,29 @@ fieldset[disabled] .form-control.focus:disabled,
     transition-duration: 0.3s;
   }
 
+  &:focus + .material-input:after,
+  &.focus + .material-input:after {
+    background-color: $input-default;
+  }
 
-.form-group {
+  &:invalid {
-  position: relative;
+    background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
+  }
+}
+
+// shared sizing
+@mixin input-floating-label-size($name, $size){
+
+  .#{$name} + & {
+    font-size: $size;
+    top: 7px;
+  }
+  .form-control.#{$name}:focus + &,
+  .form-control.#{$name}:not(.empty) + & {
+    top: $floating-label-size-ratio * -$size;
+    font-size: $floating-label-size-ratio * $size;
+  }
+}
 
 .floating-label {
   color: $input-placeholder-color;
@@ -94,54 +101,35 @@ fieldset[disabled] .form-control.focus:disabled,
   left: 0px;
   top: 5px;
   transition: 0.3s ease all;
-    font-size: $font-size-base;
+  font-size: $font-size-base; // Input sizes
-  }
 
-  .form-control:focus ~ .floating-label,
+  // sizing
-  .form-control:not(.empty) ~ .floating-label {
+  .form-control:focus + &,
+  .form-control:not(.empty) + & {
     top: $floating-label-size-ratio * -$font-size-base;
     font-size: $floating-label-size-ratio * $font-size-base;
   }
 
-  .input-sm + .floating-label { // small
+  @include input-floating-label-size(input-sm, $font-size-small);
-    font-size: $font-size-small;
+  @include input-floating-label-size(input-lg, $font-size-large);
-    top: 7px;
-  }
-  .form-control.input-sm:focus ~ .floating-label,
-  .form-control.input-sm:not(.empty) ~ .floating-label {
-    top: $floating-label-size-ratio * -$font-size-small;
-    font-size: $floating-label-size-ratio * $font-size-small;
-  }
 
-  .input-lg + .floating-label {
+  .form-control:focus + & {
-    font-size: $font-size-large;
-    top: 10px;
-  }
-  .form-control.input-lg:focus ~ .floating-label,
-  .form-control.input-lg:not(.empty) ~ .floating-label {
-    top: $floating-label-size-ratio * -$font-size-large;
-    font-size: $floating-label-size-ratio * $font-size-large;
-  }
-
-  .form-control:focus ~ .floating-label {
     color: $primary;
   }
-  .form-control:not(.empty):invalid ~ .floating-label,
+
-  .form-control.focus:invalid ~ .floating-label {
+  .form-control:not(.empty):invalid + &,
+  .form-control.focus:invalid + & {
     color: $input-danger;
   }
-
-
-  //
-  .form-control:focus ~ .material-input:after,
-  .form-control.focus ~ .material-input:after {
-    background-color: $input-default;
 }
-  .form-control:invalid {
+
-    background-image: linear-gradient($input-danger, $input-danger), linear-gradient($input-underline-color, $input-underline-color);
+.form-group {
+  position: relative;
+
+  textarea {
+    resize: none;
   }
-  textarea { resize: none; }
+  textarea + .form-control-highlight {
-  textarea ~ .form-control-highlight {
     margin-top: -11px;
   }
 
@@ -151,11 +139,12 @@ fieldset[disabled] .form-control.focus:disabled,
     font-size: 80%;
     display: none;
   }
-  .form-control:focus ~ .hint, .form-control.focus ~ .hint {
+  .form-control:focus + .hint,
+  .form-control.focus + .hint {
     display: block;
   }
 
-  select ~ .material-input:after {
+  select + .material-input:after {
     display: none;
   }
 
@@ -180,8 +169,7 @@ fieldset[disabled] .form-control.focus:disabled,
   // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
   @include bg-img-variations(unquote(" .form-control:focus"), $primary);
   @include variations(unquote(" .control-label"), color, $lightbg-text);
-  @include variations(unquote(" input.form-control:focus ~ .floating-label"), color, $input-default);
+  @include variations(unquote(" input.form-control:focus + .floating-label"), color, $input-default);
-
 }
 
 .input-group {
@@ -202,6 +190,12 @@ fieldset[disabled] .form-control.focus:disabled,
   }
 }
 
+select[multiple].form-control {
+  &, &:focus, &.focus {
+    height: 85px;
+  }
+}
+
 select.form-control {
   border: 0;
   box-shadow: none;
@@ -224,3 +218,16 @@ select.form-control {
   height: 100%;
   z-index: 100;
 }
+
+// Ugly override of Bootstrap border
+fieldset[disabled] .form-control:disabled,
+.form-group .form-control:disabled,
+.form-control:disabled,
+fieldset[disabled] .form-control:focus:disabled,
+.form-group .form-control:focus:disabled,
+.form-control:focus:disabled,
+fieldset[disabled] .form-control.focus:disabled,
+.form-group .form-control.focus:disabled,
+.form-control.focus:disabled {
+  border: 0;
+}

scripts/material.js

@@ -79,9 +79,6 @@
           formGroup = $input.wrap("<div class='form-group'></div>");
         }
 
-        //
-        formGroup.append("<span class='material-input'></span>");
-
         // Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
         if ($input.hasClass("floating-label")) {
           var placeholder = $input.attr("placeholder");
@@ -93,6 +90,16 @@
           }
           $input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
         }
+        else {
+          // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
+          //  we need the label to be *after* the input for it to work properly.
+          //  See: http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
+          var $label = formGroup.find("label.floating-label");
+          if($label.length > 0){
+            $label.detach();
+            $input.after($label);
+          }
+        }
 
         // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
         if ($input.attr("data-hint")) {
@@ -104,6 +111,9 @@
           $input.addClass("empty");
         }
 
+        // Add at the end of the form-group
+        formGroup.append("<span class='material-input'></span>");
+
         // Support for file input
         if (formGroup.next().is("[type=file]")) {
           formGroup.addClass("fileinput");