Components: md-select multiple="true" has a position issue

[dmyalik]

Bug, feature request, or proposal:

md-select multiple="true" has a position issue for options container ('.cdk-overlay-pane') - see image below.

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

https://plnkr.co/edit/KFixGy99DDT9QS9ZYXy4?p=preview

Which versions of Angular, Material, OS, browsers are affected?

material 2.0.0-beta.3, Angular 4.0.2

[crisbeto]

I'm not sure I see the issue. Can you elaborate?

[dmyalik]

For multiple md-select - options container is moved to the left side ~ by 30 px. This issue is critical on small devices or when md-select is located near left side. See image below.

It should be like this -

[crisbeto]

I see. This is a known issue that will be fixed with https://github.com/angular/material2/pull/3864. I'll close this as a duplicate.

[KevinGruber]

Not fixed with #3864 still happening.
current Version beta.6

Looks like the overlay container is exactly 32px to the left because the 32px from the checkboxes a re not added to the position left. (they are added to the width though...

[crisbeto]

I don't see the issue @KevinGruber. With the old behavior this would've gone outside the viewport:

[KevinGruber]

@crisbeto That is the original Problem the author had.
Not the second with the out of screen.

It seems as I said that the checkbox is added on the left. and then the 32px are missing on the right because the overall overlay width is not accounting the checkbox.

[crisbeto]

Ah thanks, I understand now. The extra 32px are intentional, because they allow the selected option to align with the label text, which is according to the Material spec. We do the same on the single-selection md-select, but just it's less noticeable.

[KevinGruber]

Ahh ok. But can you not extend the overlay by 32px to the right to be aligned and not looking awkward.

[crisbeto]

Yes, extending the overlay definitely makes sense. I'll open another issue to keep track of it.

[KevinGruber]

👍 Thanks

[irowbin]

@crisbeto How to handle a large amount of data? I have more than 3000 objects in the drop-down and it is very slow. Is there any way to load it lazily with a filter input? Thanks

[crisbeto]

We're discussing how to handle large amounts of options in https://github.com/angular/material2/issues/5113 @irowbin.

[irowbin]

@crisbeto Thanks, I really love this material. Somehow I am able to customize MatSelect as per my needs. Lazy load, Search query and Revert to default but, I am still feeling slow when drop-down adding more values by the lazy loader.

Maybe these features are coming in near future too.

Please take a look:

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}