diff --git a/Gruntfile.js b/Gruntfile.js
index 86d96ab5..8b7be083 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -351,7 +351,7 @@ module.exports = function (grunt) {
     },
     watch: {
       html: {
-        files: ["index.html", "bootstrap-elements.html"],
+        files: ["index.html", "bootstrap-elements.html", "test.html"],
         tasks: ["htmllint", "bootlint"]
       },
       js: {
diff --git a/dist/js/material.js b/dist/js/material.js
index 06da0736..74ed63a6 100644
--- a/dist/js/material.js
+++ b/dist/js/material.js
@@ -76,7 +76,14 @@
         var $formGroup = $input.parent(".form-group");
         if($formGroup.length === 0){
           //console.debug("Generating form-group for input", $this);
-          $formGroup = $input.wrap("<div class='form-group'></div>");
+          $input.wrap("<div class='form-group'></div>");
+          $formGroup = $input.parent(".form-group"); // find node after attached (otherwise additional attachments don't work)
+        }
+
+        // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
+        if ($input.attr("data-hint")) {
+          $input.after("<p class='help-block hint'>" + $input.attr("data-hint") + "</p>");
+          $input.removeAttr("data-hint");
         }
 
         // Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
@@ -88,7 +95,7 @@
           if(id) {
             forAttribute = "for='" + id + "'";
           }
-          $input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
+          $input.after("<label " + forAttribute + "class='control-label floating-label'>" + placeholder + "</label>");
         }
         else {
           // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
@@ -101,11 +108,6 @@
           }
         }
 
-        // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
-        if ($input.attr("data-hint")) {
-          $input.after("<p class='help-block hint'>" + $input.attr("data-hint") + "</p>");
-        }
-
         // Set as empty if is empty (damn I must improve this...)
         if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
           $formGroup.addClass("is-empty");
@@ -145,6 +147,9 @@
         // Validation events do not bubble, so they must be attached directly to the input: http://jsfiddle.net/PEpRM/1/
         //  Further, even the bind method is being caught, but since we are already calling #checkValidity here, just alter
         //  the form-group on change.
+        //
+        // NOTE: I'm not sure we should be intervening regarding validation, this seems better as a README and snippet of code.
+        //        BUT, I've left it here for backwards compatibility.
         if(isValid){
           $formGroup.removeClass("has-error");
         }
@@ -152,12 +157,11 @@
           $formGroup.addClass("has-error");
         }
       })
-      .on("focus", ".form-group input, .form-group select, .form-group.fileinput", function() {
+      .on("focus", ".form-control, .form-group.fileinput", function() {
         $(this).parent().addClass("is-focused"); // add class to form-group
       })
-      .on("blur", ".form-group input, .form-group select, .form-group.fileinput", function() {
+      .on("blur", ".form-control, .form-group.fileinput", function() {
         $(this).parent().removeClass("is-focused"); // remove class from form-group
-        // .is(":invalid"))
       })
       .on("change", ".form-group.fileinput [type=file]", function() {
         var $this = $(this);
diff --git a/index.html b/index.html
index faa10cd4..3ab56c68 100644
--- a/index.html
+++ b/index.html
@@ -415,20 +415,20 @@
                 <p class="help-block hint">This is a hint as a <code>p.help-block.hint</code></p>
               </div>
 
-              <h2>Input - floating labels
-                <small>input sizing</small>
-              </h2>
-              <div class="form-group form-group-lg">
-                <label for="i7" class="control-label floating-label">Floating label input-sm</label>
-                <input type="email" class="form-control input-sm" id="i7">
-                <span class="help-block hint">This is a hint</span>
-              </div>
+              <!--<h2>Input - floating labels-->
+                <!--<small>input sizing</small>-->
+              <!--</h2>-->
+              <!--<div class="form-group form-group-lg">-->
+                <!--<label for="i7" class="control-label floating-label">Floating label input-sm</label>-->
+                <!--<input type="email" class="form-control input-sm" id="i7">-->
+                <!--<span class="help-block hint">This is a hint</span>-->
+              <!--</div>-->
 
-              <div class="form-group">
-                <label for="i9" class="control-label floating-label">Floating label input-lg</label>
-                <input type="email" class="form-control input-lg" id="i9">
-                <span class="help-block hint">This is a hint</span>
-              </div>
+              <!--<div class="form-group">-->
+                <!--<label for="i9" class="control-label floating-label">Floating label input-lg</label>-->
+                <!--<input type="email" class="form-control input-lg" id="i9">-->
+                <!--<span class="help-block hint">This is a hint</span>-->
+              <!--</div>-->
 
               <h2>Input - Legacy</h2>
               <!-- Exercise backwards compatibility without form-group -->
diff --git a/less/_inputs.less b/less/_inputs.less
index e8739215..451c309a 100644
--- a/less/_inputs.less
+++ b/less/_inputs.less
@@ -44,31 +44,15 @@
     font-weight: normal;
   });
 
-  //&::-moz-placeholder {
-  //  color: @input-placeholder-color;
-  //  font-size: @md-input-font-size-base;
-  //  font-weight: normal;
-  //}
-  //&:-ms-input-placeholder {
-  //  color: @input-placeholder-color;
-  //  font-size: @md-input-font-size-base;
-  //  font-weight: normal;
-  //}
-  //&::-webkit-input-placeholder {
-  //  color: @input-placeholder-color;
-  //  font-size: @md-input-font-size-base;
-  //  font-weight: normal;
-  //}
+  &,
+  fieldset[disabled] & {
 
-  fieldset[disabled] &,
-  & {
     &:textarea {
       height: 40px;
     }
 
     &,
     .form-group.is-focused & {
-      //padding: 0;
       float: none;
       border: 0;
       box-shadow: none;
@@ -182,26 +166,28 @@ select.form-control {
 // MDL implementation: http://www.getmdl.io/components/index.html#textfields-section
 
 // this is for input-sm and input-lg directly on input.  Recommended way is form-group-sm and form-group-lg instead.
-.input-size-floating-label(@name, @size) {
-  .form-control.@{name} ~ & {
-    font-size: @size;
-    top: 7px;
-  }
-
-  .form-group.is-focused .form-control.@{name} ~ .form-group.is-focused &,
-  .form-group.is-empty .form-control.@{name} ~ .form-group.is-empty & {
-    top: @floating-label-size-ratio * -@size;
-    font-size: @floating-label-size-ratio * @size;
-  }
-}
+//.input-size-floating-label(@name, @size) {
+//  .form-control.@{name} ~ & {
+//    font-size: @size;
+//    top: 7px;
+//  }
+//
+//  .form-group.is-focused .form-control.@{name} ~ .form-group.is-focused &,
+//  .form-group.is-empty .form-control.@{name} ~ .form-group.is-empty & {
+//    top: @floating-label-size-ratio * -@size;
+//    font-size: @floating-label-size-ratio * @size;
+//  }
+//}
 
 // Do not nest label.floating-label inside .form-group - it messes with ~ selector
 label.control-label.floating-label {
+  @label-as-placeholder-top: -1 * @md-input-padding-base-vertical;
+
   font-size: @md-input-font-size-base; // Input sizes
   position: absolute;
   pointer-events: none;
   left: 0px;
-  top: -1 * @md-input-padding-base-vertical; // place the floating label to look like a placeholder with input padding
+  top: @label-as-placeholder-top; // place the floating label to look like a placeholder with input padding
   transition: 0.3s ease all;
 
   .form-group.is-focused & {
@@ -213,12 +199,12 @@ label.control-label.floating-label {
   // sizing
   .form-group.is-focused &,
   .form-group:not(.is-empty) & {
-    top: -1 * (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
+    top: @label-as-placeholder-top - (@md-input-label-font-size-base + @md-input-padding-base-vertical); // FIXME this needs to be calculated and moved up to .is-focused !!!
     font-size: @md-input-label-font-size-base;
   }
 
-  .input-size-floating-label(input-sm, @md-input-font-size-small);
-  .input-size-floating-label(input-lg, @md-input-font-size-large);
+  //.input-size-floating-label(input-sm, @md-input-font-size-small);
+  //.input-size-floating-label(input-lg, @md-input-font-size-large);
 }
 
 .input-group {
diff --git a/scripts/material.js b/scripts/material.js
index a3d0914a..74ed63a6 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -76,7 +76,14 @@
         var $formGroup = $input.parent(".form-group");
         if($formGroup.length === 0){
           //console.debug("Generating form-group for input", $this);
-          $formGroup = $input.wrap("<div class='form-group'></div>");
+          $input.wrap("<div class='form-group'></div>");
+          $formGroup = $input.parent(".form-group"); // find node after attached (otherwise additional attachments don't work)
+        }
+
+        // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
+        if ($input.attr("data-hint")) {
+          $input.after("<p class='help-block hint'>" + $input.attr("data-hint") + "</p>");
+          $input.removeAttr("data-hint");
         }
 
         // Legacy - Add floating label if using old shorthand <input class="floating-label" placeholder="foo">
@@ -88,7 +95,7 @@
           if(id) {
             forAttribute = "for='" + id + "'";
           }
-          $input.after("<label " + forAttribute + "class='floating-label'>" + placeholder + "</label>");
+          $input.after("<label " + forAttribute + "class='control-label floating-label'>" + placeholder + "</label>");
         }
         else {
           // If it has a label, based on the way the css is written with the adjacent sibling selector `~`,
@@ -101,11 +108,6 @@
           }
         }
 
-        // Legacy - Add hint label if using the old shorthand data-hint attribute on the input
-        if ($input.attr("data-hint")) {
-          $input.after("<p class='help-block hint'>" + $input.attr("data-hint") + "</p>");
-        }
-
         // Set as empty if is empty (damn I must improve this...)
         if ($input.val() === null || $input.val() == "undefined" || $input.val() === "") {
           $formGroup.addClass("is-empty");
diff --git a/test.html b/test.html
new file mode 100644
index 00000000..be44c4e5
--- /dev/null
+++ b/test.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Material Design for Bootstrap</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+  <!-- Mobile support -->
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <!-- Twitter Bootstrap -->
+  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
+
+  <!-- Material Design for Bootstrap -->
+  <link href="dist/css/roboto.css" rel="stylesheet">
+  <link href="dist/css/material-fullpalette.css" rel="stylesheet">
+  <link href="dist/css/ripples.css" rel="stylesheet">
+
+  <!-- Dropdown.js -->
+  <link href="//cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
+
+  <!-- Page style -->
+  <link href="index.css" rel="stylesheet">
+
+  <!-- jQuery -->
+  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
+
+</head>
+<body>
+
+<div class="container-fluid">
+
+  <h2>Input - Legacy</h2>
+  <!-- Exercise backwards compatibility without form-group -->
+  <input type="text" class="form-control floating-label" placeholder="Legacy floating label as placeholder attribute" data-hint="This is a hint using a legacy data-hint attribute on the input">
+
+</div>
+
+
+<!-- Twitter Bootstrap -->
+<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
+
+<!-- Material Design for Bootstrap -->
+<script src="dist/js/material.js"></script>
+<script src="dist/js/ripples.js"></script>
+<script>
+  $.material.init();
+</script>
+
+
+<!-- Sliders -->
+<!--<script src="//cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js"></script>-->
+<!--<script>-->
+<!--$(function () {-->
+<!--$.material.init();-->
+<!--$(".shor").noUiSlider({-->
+<!--start: 40,-->
+<!--connect: "lower",-->
+<!--range: {-->
+<!--min: 0,-->
+<!--max: 100-->
+<!--}-->
+<!--});-->
+
+<!--$(".svert").noUiSlider({-->
+<!--orientation: "vertical",-->
+<!--start: 40,-->
+<!--connect: "lower",-->
+<!--range: {-->
+<!--min: 0,-->
+<!--max: 100-->
+<!--}-->
+<!--});-->
+<!--});-->
+<!--</script>-->
+
+<!-- Dropdown.js -->
+<!--<script src="https://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.js"></script>-->
+<!--<script>-->
+  <!--$("#dropdown-menu select").dropdown();-->
+<!--</script>-->
+
+</body>
+</html>