From b4fb7e4056c4e6ae2d6f1c60b4e4be8664cb0638 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Tue, 22 Mar 2016 15:49:50 -0500
Subject: [PATCH] v4 support multiple help blocks cc #926

---
 docs/material-design/forms.md | 24 ++++++++++++++++++++++++
 scss/_forms.scss              | 15 ++++++++++++++-
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/docs/material-design/forms.md b/docs/material-design/forms.md
index ae8d11ee..5de90f9f 100644
--- a/docs/material-design/forms.md
+++ b/docs/material-design/forms.md
@@ -192,3 +192,27 @@ Because of this, you may need to manually address the width and alignment of ind
   <button type="submit" class="btn btn-primary">Send invitation</button>
 </form>
 {% endexample %}
+
+
+## Help blocks
+
+`bmd-help` can be used for form tips (known as `help-block` in v3 which has been removed in v4).  These elements are absolutely positioned but hidden, they occupy the space when hidden to prevent form bouncing.
+
+### Multiple
+
+Multiple help blocks will cause the form to bounce because subsequent blocks are relatively positioned.  The space used when hidden is that of a single help comment only.
+
+{% example html %}
+<form>
+  <fieldset class="form-group">
+    <label for="exampleInputEmail1" class="bmd-label-floating">Email address (two help blocks)</label>
+    <input type="email" class="form-control" id="exampleInputEmail1">
+    <span class="bmd-help">We'll never share your email with anyone else.</span>
+    <span class="bmd-help">And this is probably from a second plugin showing in a non-optimal way</span>
+  </fieldset>
+  <fieldset class="form-group">
+    <label for="exampleInputPassword1" class="bmd-label-floating">Password</label>
+    <input type="password" class="form-control" id="exampleInputPassword1">
+  </fieldset>  
+</form>
+{% endexample %}
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 73e20709..3fce360b 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -51,13 +51,26 @@ form {
 .bmd-help {
   position: absolute;
   display: none;
-  font-size: 80%;
+  font-size: .8rem;
   font-weight: normal;
   @extend .text-muted;
 
   .bmd-form-group.is-focused & {
     display: block;
   }
+
+  //--------------------------------------
+  // Multiple help blocks
+  // - absolute positioning is used above to prevent bouncing
+  // - when there is more than one, this will bounce but will at least show
+  &:nth-of-type(2) {
+    padding-top: 1rem; // the first one requires top padding to push it below the first one which is absolute positioned
+  }
+
+  + .bmd-help {
+    position: relative;
+    margin-bottom: 0;
+  }
 }
 
 // -----