Commit 3dee4fae authored by Marina Glancy's avatar Marina Glancy
Browse files

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

parent 032674ee
......@@ -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'));
}
}
/**
......
......@@ -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) {
......
......@@ -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;
}
}
......
File suppressed by a .gitattributes entry or the file's encoding is unsupported.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment