Fix grouped/addons size with inside labels (buefy#1761)

* Fix grouped/addons size with inside labels * Use b-button instead of button
LeoMouyna · Jan 6, 2020 · 927d1c6 · 927d1c6
1 parent 32b8619
commit 927d1c6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 0 deletions.
diff --git a/docs/pages/components/field/examples/ExLabelPosition.vue b/docs/pages/components/field/examples/ExLabelPosition.vue
@@ -51,6 +51,23 @@
             :label-position="labelPosition">
             <b-input maxlength="200" type="textarea"></b-input>
         </b-field>
+
+        <hr>
+        <p class="title is-6">Also works for grouped field and with addons.</p>
+
+        <b-field label="Search..." :label-position="labelPosition" grouped>
+            <b-input placeholder="Search..." type="search"></b-input>
+            <p class="control">
+                <b-button class="button is-primary">Search</b-button>
+            </p>
+        </b-field>
+
+        <b-field label="Search..." :label-position="labelPosition">
+            <b-input placeholder="Search..." type="search"></b-input>
+            <p class="control">
+                <b-button class="button is-primary">Search</b-button>
+            </p>
+        </b-field>
     </section>
 </template>
 

diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss
@@ -160,6 +160,16 @@ $floating-in-height: 3.25em;
                 }
             }
         }
+
+        &.has-addons, &.is-grouped {
+            .control {
+                .button,
+                .input,
+                .select select {
+                    height: $floating-in-height
+                }
+            }
+        }
     }
     &.is-floating-label, &.is-floating-in-label {
         &.has-numberinput {