Materialize: "select" control inside "modal" makes the scroll

[acheshkov]

The "select" control inside modal window at open state makes the scroll and not all values of select are visible. I exprect no scroll and all values of dropdowned list are visible.

[jsduffy]

this is duplicated in #1713

[carlosperate]

This issue has been discussed already in https://github.com/Dogfalo/materialize/issues/1385

[Tim-arts]

I think this issue now fixed. Could you please verify ?

[JoostvdB94]

This issue still is present in the current version.

[SPodjasek]

Commit above is still not a perfect solution, but suits my problem. It limits any dropdown height if placed inside .modal to height of .modal-content.
As you can see below there're two possible issues left:

• [ ] when you switch from one select to another they will still get 'full-height'
• [ ] when select is placed at bottom of modal and it will not fit upwards, it will be rendered as usual with default max-height

[justinjoyn]

+1, Tried making the position:fixed for select-dropdown, the options now render above modal, but I can't place the dropdown under the select input.

[yoieh]

This is still an issue. I have the same problem but in my case the dropdown drops up and cuts of in a .bottom-sheet modal. I cant even select the items thats listed over the top of the modal.

.modal {
  overflow: visible;
}

Shows the whole select but then i will lose overflow: scroll of the .bottom-sheet.

[imaia]

I'm also affected by this issue. : /

[arredgroup]

If I use .modal { overflow:visible; } in case of content overflow the modal not scroll

[Dogfalo]

Fixed in v1-dev

[VicJohn]

@Dogfalo can you tell me where I have to apply the fix. Because I don't want to upgrade the api. I am using version v0.98.1

[adhenrique]

This issue still is present in the current version.

[benNek]

Yup. this bug is still present in v0.100.2

[carusology]

@adhenrique when you say current version, do you mean in the v1 branch @Dogfalo referenced, or in one of the v0.X releases? The former means this should issue be reopened.

[adhenrique]

@carusology yeah. I refer to v1-dev, which the dogfalo commented and also master branch.

[Dogfalo]

If you are on the latest build, use the container option added in 0c703faa0fd60c96d5232ba7e33d36309b943698

[adhenrique]

@Dogfalo hmm. Like this?
$('select').select({ dropdownOptions: { container: '.modal-content', } });

[Dogfalo]

instead of the selector in the container, you should pass in the element directly

[adhenrique]

@Dogfalo I did not understand. Can u provide a simple code pls? I reviewed the docs from v1.0, but there is not instructions about this...

[Dogfalo]

This is what we do for the Select inside the Datepicker

M.Select.init(yearSelect, {classes: 'select-year', dropdownOptions: {container: document.body, constrainWidth: false}});

[adhenrique]

Thanks @Dogfalo.
I did some testing, and it looks like the dropdown does not get the options sent by Select.init. Look:

And forcing the option directly into the Select plugin (in _setupDropdown), Dropdown gets the option, but the problem seems to persist. Look:

Did I make a mistake?

[Dogfalo]

You are probably not using the latest build from the v1-dev branch

[adhenrique]

I downloaded from the tree/v1-dev.

That's its?

[Dogfalo]

You are not on the latest, because the container option is not shown in your screenshot. Please redownload it from github

[adhenrique]

So...
I removed all files from assets, re-downloaded, tested them and the problem persists.
The container option only shown when this is setted (like i do in second screenshot).

[Dogfalo]

if you are using the precompiled files from dist/ those only update on version bumps, you need to compile from the source to test out this change or wait till the next version

[VicJohn]

Found a solution for my above problem.
Replace the following lines of code in materialize.js file

activates.css( { position: 'absolute', top: origin.position().top + verticalOffset + scrollYOffset, left: leftPosition + scrollXOffset });

if (activates.css("position") == "fixed" && activates.parent().hasClass("select-wrapper")) { activates.css({ position: 'absolute', top: origin.offset().top + verticalOffset + scrollYOffset, left: origin.offset().left }); } else { activates.css({ position: 'absolute', top: origin.position().top + verticalOffset + scrollYOffset, left: leftPosition + scrollXOffset }); }
In materialize.css
.dropdown-content { //position: absolute; position: fixed !important; }

[geonanorch]

@VicJohn thank you, the fix did not work for me in modals though: the CSS 'top' property for an absolutely-positioned element applies relative to the nearest fixed-positioned ancestor (so the modal window), but offset() returns values relative to the document.

Here a derived fix for v0.100.2 which should work in all cases:
updated on 2018-04-19: we do not want 'fixed' always, positioning must be set depending on whether there are fixed ancestors or not:

        var fixedParents = activates.parents().filter(function() {
          return $(this).css('position') === 'fixed';
        });
        if (fixedParents.length > 0) {
          var fixedOffset = fixedParents.get().reduce(function(acc, ancestor) {
            acc.top += $(ancestor).offset().top;
            acc.left += $(ancestor).offset().left;
            return acc;
          }, {
            top: 0,
            left: 0
          });
          activates.css({
            top: origin.offset().top - fixedOffset.top + verticalOffset + scrollYOffset,
            left: origin.offset().left - fixedOffset.left + scrollXOffset
          });
        } else {
          activates.css({
            position: 'absolute',
            top: origin.position().top + verticalOffset + scrollYOffset,
            left: leftPosition + scrollXOffset
          });
        }        

[VicJohn]

Was that issue still open even after applying the above CSS changes?

[geonanorch]

Yes. I did not forget to add the CSS rule, and because of important ! the activates.css(...) call cannot change position anymore (which is good, we want fixed).
Note that I only tested with my own code and with materialize v0.100.2, your mileage may vary.

_Update:_ I believe our comments crossed, I already answered your next comment.

[VicJohn]

@geonanorch did you apply the below CSS change?

.dropdown-content {
//position: absolute;
position: fixed !important;
}

[VicJohn]

@geonanorch , yes exactly

[geonanorch]

I just realized (the hard way) that while my suggested patch works when there is a fixed-positioned ancestor, it completely breaks in the case when there is not.
See previous comment for an updated patch.

[yassinevic]

@geonanorch
This solution worked perfectly for me. tnx man you just saved a human life.

[Lennuj420]

@geonanorch where should i put the fix? in my js or in the js file of materialize??? i cant seem to make it work... thanks in advance

[geonanorch]

@Lennuj420 I have this in the materialize dropdown.js code, look for the // Position dropdown comment around line 165:

        // Position dropdown
        /* patch inspired from: https://github.com/Dogfalo/materialize/issues/1527#issuecomment-365829158
        activates.css({
          position: 'absolute',
          top: origin.position().top + verticalOffset + scrollYOffset,
          left: leftPosition + scrollXOffset
        });
        */
        var fixedParents = activates.parents().filter(function () {
          return $(this).css('position') === 'fixed';
        });
        var msie = window.navigator.userAgent.indexOf("MSIE ") !== -1 ||
          !!navigator.userAgent.match(/Trident.*rv\:11\./);
        if (fixedParents.length > 0 && !msie) {
          var fixedOffset = fixedParents.get().reduce(function (acc, ancestor) {
            acc.top += $(ancestor).offset().top;
            acc.left += $(ancestor).offset().left;
            return acc;
          }, {
            top: 0,
            left: 0
          });
          activates.css({
            position: 'fixed',
            top: origin.offset().top - fixedOffset.top + verticalOffset + scrollYOffset,
            left: origin.offset().left - fixedOffset.left + scrollXOffset
          });
        } else {
          activates.css({
            position: 'absolute',
            top: origin.position().top + verticalOffset + scrollYOffset,
            left: leftPosition + scrollXOffset
          });
        }

        // Show dropdown

If it still does not work and you have verified that your browser is loading the correct code, then probably you have a setup which is not addresses by the patch. I can have a look if you can provide a standalone minimal HTML document, either here of on jsbin or fiddle.

[Lennuj420]

@geonanorch thanks for the reply. i got it working now :smiley:

[simkessy]

Not working on my end. Is the update suppose to take care of it or do I need to override the dropdown-content class?

[geonanorch]

@simkessy the patch above is meant for v0.100.2, which is no longer receiving updates (I assume that v1 has this issue fixed, never checked). And yes, you need to modify the code in dropdown.js.