Suggestion: MaterialSelect isn't sufficient enough for numer

Topic: Suggestion: MaterialSelect isn't sufficient enough for numerous elements

ak.leimrey pro asked 5 years ago

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)

}

}

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

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.

Add comment

Damian Gemza staff answered 5 years ago