Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Rendering issue when selector is at bottom of viewport #63

Closed
hadsy opened this issue Oct 4, 2018 · 3 comments · Fixed by #64
Closed

Rendering issue when selector is at bottom of viewport #63

hadsy opened this issue Oct 4, 2018 · 3 comments · Fixed by #64

Comments

@hadsy
Copy link

hadsy commented Oct 4, 2018

Great component but we are just having strange rendering issue when the selector is at the bottom of the viewport. Is there any CSS we can use to override this?
I've tried using disableOptionCentering on the mat-select but this has no effect for me.
Many thanks

image

@macjohnny
Copy link
Member

macjohnny commented Oct 4, 2018

@hadsy @LiamKenneth this seems to be related to

.mat-select-search-panel {
  ...
  max-height: 350px;
}

see https://github.com/bithost-gmbh/ngx-mat-select-search/blob/1.4.0/src/app/mat-select-search/mat-select-search.component.scss#L39

Setting it to the original value (https://github.com/angular/material2/blob/master/src/lib/select/select.scss#L9) seems to resolve the issue:

.mat-select-search-panel {
  ...
  max-height: 256px;
}

I will release a patch version that removes this css property, using the original value.

@macjohnny
Copy link
Member

@hadsy I just released 1.4.1, which resolves the issue by using the default panel height (256px) instead of overriding it. thanks for reporting this issue.
feel free to star this project if you like it.

@hadsy
Copy link
Author

hadsy commented Oct 4, 2018

Cheers @macjohnny just tried it, works like a charm. Also big thanks for the quick response and new release, impressive!

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants