Topic: Suggestion: MaterialSelect isn't sufficient enough for numerous elements
Hello,
I realized with time, that the select component is slowly reaching an amazing level of polish, however, I also realized that the select component isn't terribly well with many items. Even by reducing the padding of each span, it can rarely depict more than four to five options. I circumvented this by creating a Directive that changes the height and max-height of the select component, which is serviceable but not too great. Since the animation of the select works only until the initially considered point on the Y scale and then there is a sudden expansion. On the other hand, using ONLY css wasn't helping, since I wanted to depict as many options as possible depending on the view-port. For the ones curious I'm also adding how I did it; Fair warning, this is a very special case with an fair amount of static items
So my suggestion would be: Perhaps introduce a directive or input parameter for the component that set a size that is serviceable for mobile and/or desktop application that requires many select options.
import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';
@Directive({
selector:'[ResizeSelectDropDown]'
})
export class ResizeSelectDropDownDirective {
private selectElementSize=functionoffset(el:Element) {
let rect=el.getBoundingClientRect();
let top=rect.top;
let left=rect.left;
return { top:top, left:left }
}
constructor(public elementRef:ElementRef, public renderer:Renderer2) {
}
@HostListener('click', ['$event'])
public onClick() {
let selectOptions=this.elementRef.nativeElement.querySelector('.options')
let size=this.selectElementSize(this.elementRef.nativeElement);
if (!selectOptions) {
return;
}
let topY=size.top;
let differenceHeight= (window.innerHeight-topY-10);
let height=JSON.stringify(differenceHeight- (differenceHeight*.33));
let maxHeight=JSON.stringify(differenceHeight);
let heightStringPx=height+'px';
let maxHeightStringPx=maxHeight+'px';
this.renderer.setStyle(selectOptions, 'height', heightStringPx)
this.renderer.setStyle(selectOptions, 'max-height', maxHeightStringPx)
}
}
Dear @ak.leimrey
With the next release of MDB Angular it will be possible to set the custom height of Select items with input [optionHeight].
Best Regards,
Damian
Hello,
Could you provide more information about reproduction steps? How can I recreate this problem on my end?
There is an 'visibleOptions' input for mdb-select. You can specify how many items should be visible without displaying the inner scroll bar.
ak.leimrey pro commented 5 years ago
Sorry for the late response.
I'm adding a number value for the output, but nothing appears to happen and I have the current version of MDB that's why I wrote my directive to begin with
Arkadiusz Idzikowski staff commented 5 years ago
Could you provide some code and reproduction steps so I can debug this problem on my end?
ak.leimrey pro commented 5 years ago
I cleared the node folder and I installed MDB again and it fixes the issue. However, something I would like to add, while the input parameter works, it seems to be based on a set value. In cases someone reduces the margins of each item and/or uses smaller fonts, it isn't working too reliably.
Arkadiusz Idzikowski staff commented 5 years ago
We are already aware of that problem and we need to add some inputs to make the customisation of the component easier.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: Yes
- Provided link: No