Merge pull request #65 from mrliptontea/issue-54-max-height-for-list-field

Make list fields scrollable, fixes #54

README.md

@@ -69,6 +69,7 @@ Latest (master):
 * Introduce project tiles on projects list page (enabled by default, can be switched off by setting `$use-project-tiles` to `false`)
 * Fixed #44: adjust width of the label column on the login form
 * Merged #49: German translations
+* Fixed #54: long checkbox lists will be scrollable
 * Fixed #62: anchors won't scroll the page
 
 v1.8.0 (2016-11-20):

src/sass/_variables.scss

@@ -329,6 +329,8 @@ $label-space:                   10px !default;
 $legend-color:                  $gray-dark !default;
 $legend-border-color:           #e5e5e5 !default;
 
+$check-list-max-height:         20 * $line-height-computed;
+$check-list-offset-top:         $input-padding-vertical + 1px;
 
 //== Top
 //

src/sass/components/_forms.scss

@@ -303,6 +303,7 @@ em.info {
       margin-left: 0;
       padding-left: 16px;
       float: none;
+      clear: left;
       text-align: left;
       cursor: pointer;
     }
@@ -542,64 +543,45 @@ label[for=closed] {
 }
 
 
-#watchers_form {
-  overflow: hidden;
-
-  .search_for_watchers {
-    display: block;
-  }
-
-  #watchers_inputs {
-    display: block;
-    max-width: 64em;
-    margin-top: $input-padding-vertical + 1px;
-    margin-bottom: $line-height-computed / 2;
-    overflow: auto;
-    columns: 18em 3;
-  }
+#watchers_inputs {
+  display: block;
+  max-width: 64em;
+  max-height: $check-list-max-height;
+  margin-bottom: $line-height-computed / 2;
+  padding-top: $check-list-offset-top;
+  overflow: auto;
+  columns: 18em 3;
 
   label.floating {
-    @include checkbox;
-    display: block;
-    width: auto;
-    margin: 0;
-    float: none;
-
-    input[type="checkbox"] {
-      top: -1px;
-    }
+    @include check-list;
   }
 }
 
 
-//== Custom logic (boolean) field displayed as radio buttons
+//== List of custom field values
 //
 
 .check_box_group {
   display: block;
+  width: 90%;
+  max-height: $check-list-max-height;
+  padding-top: $check-list-offset-top;
   overflow-y: auto;
 
   label {
-    display: block;
-    width: auto;
-    margin-bottom: 0;
-    margin-left: 0;
-    float: none;
-    font-weight: normal;
-    text-align: left;
+    @include check-list;
   }
 
+  // Boolean field displayed as inline radio buttons
   &.bool_cf {
+    overflow: initial;
+
     label {
-      @extend %clearfix;
       display: inline-block;
-      margin-right: 10px;
-      padding-left: 20px;
-      user-select: none;
+      margin-right: $padding-base-horizontal;
 
       input[type="checkbox"],
       input[type="radio"] {
-        top: 0;
         margin-left: -20px;
         float: left;
       }

src/sass/components/_responsive.scss

@@ -138,10 +138,8 @@
     }
 
     .splitcontentleft {
-      margin-bottom: $line-height-computed;
       padding-right: 0;
       float: none;
-
     }
 
     .splitcontentright {

src/sass/mixins/_forms.scss

@@ -41,12 +41,40 @@
 }
 
 @mixin checkbox() {
+  @include check;
+}
+
+@mixin radio() {
+  @include check;
+}
+
+@mixin check() {
   @extend %clearfix;
   padding-left: 20px;
-  user-select: none;
+  text-align: left;
+  font-weight: $font-weight-normal;
 
-  input[type="checkbox"] {
+  input[type="checkbox"],
+  input[type="radio"] {
+    width: auto;
     margin-left: -20px;
     float: left;
   }
 }
+
+@mixin check-list() {
+  @include check;
+  display: block;
+  width: auto;
+  margin: $btn-padding-vertical 0;
+  float: none;
+
+  @media screen and (min-width: $screen-sm-min) {
+    margin: 0;
+  }
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    top: -1px;
+  }
+}