MDL-38574 qtype chooser: quick fix to make it fit on-screen.

MDL-32729 will provide a better fix for this, but we may as well apply
this quick fix on stable branches.

question/editlib.php

@@ -1819,6 +1819,7 @@ function print_choose_qtype_to_add_form($hiddenparams, array $allowedqtypes = nu
     echo "</div>\n";
     echo '<div class="qtypes">' . "\n";
     echo '<div class="instruction">' . get_string('selectaqtypefordescription', 'question') . "</div>\n";
+    echo '<div class="alloptions">' . "\n";
     echo '<div class="realqtypes">' . "\n";
     $fakeqtypes = array();
     foreach (question_bank::get_creatable_qtypes() as $qtypename => $qtype) {
@@ -1838,6 +1839,7 @@ function print_choose_qtype_to_add_form($hiddenparams, array $allowedqtypes = nu
     }
     echo "</div>\n";
     echo "</div>\n";
+    echo "</div>\n";
     echo '<div class="submitbuttons">' . "\n";
     echo '<input type="submit" value="' . get_string('next') . '" id="chooseqtype_submit" />' . "\n";
     echo '<input type="submit" id="chooseqtypecancel" name="addcancel" value="' . get_string('cancel') . '" />' . "\n";

theme/base/style/question.css

@@ -21,11 +21,30 @@
 #qtypechoicecontainer #chooseqtype {width: 35em;}
 #qtypechoicecontainer #chooseqtypehead h3 {margin: 0;font-weight: normal;}
 #qtypechoicecontainer #chooseqtype .qtypes {position: relative;border-bottom: 1px solid #BBBBBB;padding: 0.24em 0;}
+#qtypechoicecontainer #chooseqtype .alloptions {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 400px;
+    max-height: calc(100vh - 8em);
+    width: 60%;
+}
 #qtypechoicecontainer #chooseqtype .qtypeoption {margin-bottom: 0; padding: 0.3em 0 0.3em 1.6em;}
 #qtypechoicecontainer #chooseqtype .qtypeoption img {vertical-align: text-bottom;padding-left: 1em;padding-right: 0.5em;}
 #qtypechoicecontainer #chooseqtype .selected {background-color: #FFFFFF;box-shadow: 0px 0px 10px 0px #CCCCCC;-webkit-box-shadow: 0px 0px 10px 0px #CCCCCC;-moz-box-shadow: 0px 0px 10px 0px #CCCCCC;}
 #qtypechoicecontainer #chooseqtype .instruction,
-#qtypechoicecontainer #chooseqtype .qtypesummary {display: none;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 60%;margin: 0;padding: 1.5em 1.6em;background-color: #FFFFFF;}
+#qtypechoicecontainer #chooseqtype .qtypesummary {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 60%;
+    margin: 0;
+    bottom: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 1.5em 1.6em;
+    background-color: #FFFFFF;
+}
 #qtypechoicecontainer #chooseqtype .instruction,
 #qtypechoicecontainer #chooseqtype .selected .qtypesummary {display: block;}
 

theme/bootstrapbase/less/moodle/question.less

@@ -62,8 +62,7 @@
     border-top: 0 none;
     .box-shadow(5px 5px 20px 0 #666);
 }
-//#qtypechoicecontainer
-#chooseqtype {
+#qtypechoicecontainer #chooseqtype {
     width: 40em;
 }
 #chooseqtypehead h3 {
@@ -75,6 +74,17 @@
     border-bottom: 1px solid #bbb;
     padding: 0.24em 0;
 }
+#chooseqtype .alloptions {
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 400px;
+    max-height: calc(100vh - 15em);
+ /* The next line is a workaround because recess is crap. Delete ththe following line once
+  * https://github.com/twitter/recess/issues/59 / https://github.com/twitter/recess/issues/75
+  * is fixed. The previous line is the right one. */
+    max-height: 60vh;
+    width: 60%;
+}
 #chooseqtype .qtypeoption {
     margin-bottom: 0;
     padding: 0.3em 0.3em 0.3em 1.6em;
@@ -97,6 +107,8 @@
     bottom: 0;
     left: 60%;
     margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
     padding: 1.5em 1.6em;
     background-color: #fff;
     overflow-y: auto;