mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-06 08:52:46 +02:00
Code Issues Projects Releases Wiki Activity

MDL-70180 theme_boost: Allow form autoselect modal overflow

Browse Source 
Co-authored-by: Mikel Martín <mikel@moodle.com>
This commit is contained in:
Bas Brands 2020-11-19 11:13:13 +00:00 committed by Mikel Martín
parent 525fc81cf6
commit 98dedc46ee
7 changed files with 45 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/amd/build/form-autocomplete.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
lib/amd/build/form-autocomplete.min.js.map
View File

File diff suppressed because one or more lines are too long

9
lib/amd/src/form-autocomplete.js
View File

@ -30,6 +30,7 @@ define([
'core/loadingicon',
'core/aria',
'core_form/changechecker',
'core/popper2',
], function(
$,
log,
@ -38,7 +39,8 @@ define([
notification,
LoadingIcon,
Aria,
FormChangeChecker
FormChangeChecker,
Popper
) {
// Private functions and variables.
/** @var {Object} KEYS - List of keycode constants. */
@ -526,7 +528,10 @@ define([
// Show it if it is hidden.
Aria.unhide(suggestionsElement.get());
suggestionsElement.show();
Popper.createPopper(inputElement[0], suggestionsElement[0], {
placement: 'bottom-start',
modifiers: [{name: 'flip', enabled: false}],
});
// For each option in the list, hide it if it doesn't match the query.
suggestionsElement.children().each(function(index, node) {

1
theme/boost/scss/moodle/forms.scss
View File

@ -419,6 +419,7 @@ textarea[data-auto-rows] {
.felement[data-fieldtype="autocomplete"],
.felement[data-fieldtype="tags"] {
display: block !important; /* stylelint-disable-line declaration-no-important */
position: static;
}
// Show editor at 100% width by default.

11
theme/boost/scss/moodle/modal.scss
View File

@ -31,6 +31,17 @@
}
}
/* Change the modal-dialog-scrollable class to position: static to fix the issue with popper.js and autocomplete. */
.modal-dialog-scrollable:has(.form-autocomplete-suggestions) {
position: static;
.modal-content {
position: static;
.modal-body {
position: static;
}
}
}
/* Bug fix for TinyMCE menu when in fullscreen mode. */
body.tox-fullscreen .modal-dialog {
width: 100%;

12
theme/boost/style/moodle.css
View File

@ -33517,6 +33517,7 @@ textarea[data-auto-rows] {
.felement[data-fieldtype=autocomplete],
.felement[data-fieldtype=tags] {
display: block !important; /* stylelint-disable-line declaration-no-important */
position: static;
}
[data-fieldtype=editor] > div {
@ -37244,6 +37245,17 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
opacity: inherit;
}
/* Change the modal-dialog-scrollable class to position: static to fix the issue with popper.js and autocomplete. */
.modal-dialog-scrollable:has(.form-autocomplete-suggestions) {
position: static;
}
.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content {
position: static;
}
.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content .modal-body {
position: static;
}
/* Bug fix for TinyMCE menu when in fullscreen mode. */
body.tox-fullscreen .modal-dialog {
width: 100%;

12
theme/classic/style/moodle.css
View File

@ -33517,6 +33517,7 @@ textarea[data-auto-rows] {
.felement[data-fieldtype=autocomplete],
.felement[data-fieldtype=tags] {
display: block !important; /* stylelint-disable-line declaration-no-important */
position: static;
}
[data-fieldtype=editor] > div {
@ -37178,6 +37179,17 @@ span[data-flexitour=container][x-placement=right] div[data-role=arrow]:after, sp
opacity: inherit;
}
/* Change the modal-dialog-scrollable class to position: static to fix the issue with popper.js and autocomplete. */
.modal-dialog-scrollable:has(.form-autocomplete-suggestions) {
position: static;
}
.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content {
position: static;
}
.modal-dialog-scrollable:has(.form-autocomplete-suggestions) .modal-content .modal-body {
position: static;
}
/* Bug fix for TinyMCE menu when in fullscreen mode. */
body.tox-fullscreen .modal-dialog {
width: 100%;