diff options
| -rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 4 | ||||
| -rw-r--r-- | web/cobrands/sass/_multiselect.scss | 18 |
2 files changed, 21 insertions, 1 deletions
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index e3c76c4e6..2f0a48385 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -116,7 +116,9 @@ function isR2L() { // data-* attributes into settings for the multiSelect constructor. return this.each(function() { var $select = $(this); - var settings = {}; + var settings = { + modalHTML: '<div class="multi-select-modal">' + }; if ( $select.data('none') ) { settings.noneText = $select.data('none'); diff --git a/web/cobrands/sass/_multiselect.scss b/web/cobrands/sass/_multiselect.scss index 3503c6bfd..5f59599a6 100644 --- a/web/cobrands/sass/_multiselect.scss +++ b/web/cobrands/sass/_multiselect.scss @@ -35,6 +35,10 @@ } } +.multi-select-modal { + display: none; +} + // Centred, modal display for sub-768px screens only. @media (max-width: 47.94em) { .multi-select-menu { @@ -60,6 +64,20 @@ margin-#{$left}: -2em; } } + + .multi-select-modal { + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + background: rgba(0, 0, 0, 0.4); + + .multi-select-container--open & { + display: block; + } + } } .multi-select-presets { |