[Fixes #15691] .form-control-static changes height when empty

[Fixes #15691] .form-control-static changes height when empty by setting the minimum height to the size it is when text is in the `.form-control-static`

JSFiddle: http://jsfiddle.net/4pdo4yzo/

Compute the minimum height

@line-height-computed = ~20px
@font-size-base = 14px

This should come to approx. 34px

Add min-height to from-group-* per @cvrebert

I had this wrong. The minimum height would depend on the font-size of that specific group, thus we need to declare it once for font-size-small and once also for font-size-large

diff --git a/less/forms.less b/less/forms.less
index 3138c2c518ab7b3a300c1a23e8b6fe7ff1f8cd63..a0840cd4f805887848ca82b8dc6b11e8decfd3e4 100644 (file)
--- a/less/forms.less
+++ b/less/forms.less
@@ -294,6 +294,7 @@ input[type="checkbox"] {
   padding-bottom: (@padding-base-vertical + 1);
   // Remove default margin from `p`
   margin-bottom: 0;
+  min-height: (@line-height-computed + @font-size-base);
 
   &.input-lg,
   &.input-sm {
@@ -323,6 +324,7 @@ input[type="checkbox"] {
     padding: @padding-small-vertical @padding-small-horizontal;
     font-size: @font-size-small;
     line-height: @line-height-small;
+    min-height: (@line-height-computed + @font-size-small);
   }
 }
 
@@ -338,6 +340,7 @@ input[type="checkbox"] {
     padding: @padding-large-vertical @padding-large-horizontal;
     font-size: @font-size-large;
     line-height: @line-height-large;
+    min-height: (@line-height-computed + @font-size-large);
   }
 }