From 0c90b44d40452d9f33ba6a64129ecb8f65ea4784 Mon Sep 17 00:00:00 2001
From: Federico Zivolo <fzivolo@quid.com>
Date: Tue, 5 Sep 2017 14:26:39 +0200
Subject: [PATCH] fix: CollapseInline improvements

---
 scss/_forms.scss | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/scss/_forms.scss b/scss/_forms.scss
index ad9e0c6f..b7e75a51 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -125,24 +125,29 @@ form {
   //    `width` class must also be on the element FIXME: do this with JS, it is a marker class and should be implicit because after all, we are an bmd-collapse-inline
   //    FIXME: js needs to do the focus on shown.bs.collapse event http://v4-alpha.getbootstrap.com/components/collapse/#events
   &.bmd-collapse-inline {
+    display: flex;
+    align-items: center;
     padding: 0; // get rid of any padding as this is a width transition
+    min-height: 2.1em;
 
     // Expandable Holder.
     .collapse {
-      &.in {
+      flex: 1;
+      display: none;
+      &.show {
         // This is an unfortunate hack. Animating between widths in percent (%)
         // in many browsers (Chrome, Firefox) only animates the inner visual style
         // of the input - the outer bounding box still 'jumps'.
         // Thus assume a sensible maximum, and animate to/from that value.
-        max-width: 600px;
+        max-width: 1200px;
       }
     }
 
     .collapsing,
     .width:not(.collapse),
     // collapsing is removed and momentarily only width is present
-    .collapse.in {
-      display: inline-block;
+    .collapse.show {
+      display: block;
     }
 
     .collapsing {