MDL-59775 forms: add option to display any form vertical

lib/formslib.php

@@ -1411,6 +1411,16 @@ abstract class moodleform {
 
         return $data;
     }
+
+    /**
+     * Set display mode for the form when labels take full width of the form and above the elements even on big screens
+     *
+     * Useful for forms displayed inside modals or in narrow containers
+     */
+    public function set_display_vertical() {
+        $oldclass = $this->_form->getAttribute('class');
+        $this->_form->updateAttributes(array('class' => $oldclass . ' full-width-labels'));
+    }
 }
 
 /**

theme/boost/scss/moodle/forms.scss

@@ -334,6 +334,24 @@ textarea[data-auto-rows] {
     overflow-x: hidden;
 }
 
+/** Display elements under labels in vertical forms regardless of the screen size. */
+.mform.full-width-labels {
+    & > .row {
+        margin-left: 0;
+        margin-right: 0;
+        & > .col-md-3,
+        & > .col-md-9 {
+            float: none;
+            width: inherit;
+            padding-right: 0;
+            padding-left: 0;
+        }
+        &.femptylabel > .col-md-3 {
+            display: none;
+        }
+    }
+}
+
 /** Allow wrapping an mform in a div with the form-inline class to have an inline, responsive form. */
 .form-inline {
     @include media-breakpoint-up(md) {

theme/bootstrapbase/less/moodle/forms.less

@@ -279,7 +279,7 @@ fieldset.coursesearchbox label {
     font-weight: bold;
 }
 .makeFormsVertical() {
-    #region-main .mform:not(.unresponsive) {
+    &:not(.unresponsive) {
         .fitem {
             .fitemtitle {
                 display: block;
@@ -315,7 +315,6 @@ fieldset.coursesearchbox label {
                 display: inline-block;
                 margin-top: 4px;
                 padding-top: 5px;
-                width: auto;
             }
         }
         .fitem_fcheckbox {
@@ -331,11 +330,18 @@ fieldset.coursesearchbox label {
     }
 }
 
+/**
+ * Forms marked as vertical always display this way;
+ */
+.mform.full-width-labels {
+    .makeFormsVertical;
+}
+
 /**
  * Make forms vertical when the screen is less than 1200px;
  */
 @media (max-width: 1199px) {
-    body {
+    body #region-main .mform {
         .makeFormsVertical;
     }
 }
@@ -354,7 +360,7 @@ fieldset.coursesearchbox label {
 @maxWidthForVerticalForms: 1474px;
 
 @media (max-width: @maxWidthForVerticalForms) {
-    .used-region-side-pre.used-region-side-post {
+    .used-region-side-pre.used-region-side-post #region-main .mform {
         .makeFormsVertical;
     }
 }

theme/bootstrapbase/style/moodle.css

@@ -16745,6 +16745,49 @@ fieldset.coursesearchbox label {
 #region-main .mform:not(.unresponsive) .fitem .fitemtitle label {
   font-weight: bold;
 }
+/**
+ * Forms marked as vertical always display this way;
+ */
+.mform.full-width-labels:not(.unresponsive) .fitem .fitemtitle {
+  display: block;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  text-align: left;
+  width: 100%;
+}
+.mform.full-width-labels:not(.unresponsive) .fitem .felement {
+  margin-left: 0;
+  width: 100%;
+  float: left;
+  padding-left: 0;
+  padding-right: 0;
+}
+.mform.full-width-labels:not(.unresponsive) .fitem .fstatic:empty {
+  display: none;
+}
+.mform.full-width-labels:not(.unresponsive) .fitem .fcheckbox > span,
+.mform.full-width-labels:not(.unresponsive) .fitem .fradio > span,
+.mform.full-width-labels:not(.unresponsive) .fitem .fgroup > span {
+  margin-top: 4px;
+}
+.mform.full-width-labels:not(.unresponsive) .femptylabel .fitemtitle {
+  display: inline-block;
+  width: auto;
+  margin-right: 8px;
+}
+.mform.full-width-labels:not(.unresponsive) .femptylabel .felement {
+  display: inline-block;
+  margin-top: 4px;
+  padding-top: 5px;
+}
+.mform.full-width-labels:not(.unresponsive) .fitem_fcheckbox .fitemtitle,
+.mform.full-width-labels:not(.unresponsive) .fitem_fcheckbox .felement {
+  display: inline-block;
+  width: auto;
+}
+.mform.full-width-labels:not(.unresponsive) .fitem_fcheckbox .felement {
+  padding: 6px;
+}
 /**
  * Make forms vertical when the screen is less than 1200px;
  */
@@ -16780,7 +16823,6 @@ fieldset.coursesearchbox label {
     display: inline-block;
     margin-top: 4px;
     padding-top: 5px;
-    width: auto;
   }
   body #region-main .mform:not(.unresponsive) .fitem_fcheckbox .fitemtitle,
   body #region-main .mform:not(.unresponsive) .fitem_fcheckbox .felement {
@@ -16833,7 +16875,6 @@ fieldset.coursesearchbox label {
     display: inline-block;
     margin-top: 4px;
     padding-top: 5px;
-    width: auto;
   }
   .used-region-side-pre.used-region-side-post #region-main .mform:not(.unresponsive) .fitem_fcheckbox .fitemtitle,
   .used-region-side-pre.used-region-side-post #region-main .mform:not(.unresponsive) .fitem_fcheckbox .felement {