title: Adjust height of dropdown menu Angular7 autocomplete with virtual-scroll
body: <p>I'm using angular-material Autocomplete (version 7) for my application. I'm using <code>&lt;cdk-virtual-scroll-viewport&gt;</code> inside . Besides numerious problems I've resolved, there is one I don't understand:</p>
  
  <p>the dropdown menu doesn't display when I add max-height css, and if I add height, it will display but in fixed height.</p>
  
  <p>Here is part of my code:
  html:</p>
  
  <pre><code>&lt;mat-form-field class="single-select"&gt;
    &lt;input matInput #singleInput class="single-input layout flex" type="text" [formControl]="selectControl" [matAutocomplete]="auto" (blur)="onBlur()" (focus)="onFocus()"&gt;
  
    &lt;mat-autocomplete class="single-autocomplete" #auto="matAutocomplete" [displayWith]="displayFn"&gt;
      &lt;cdk-virtual-scroll-viewport itemSize="45" minBufferPx="360" maxBufferPx="360" class="virtual-scroll"&gt;
        &lt;mat-option *cdkVirtualFor="let option of filteredOptions" [class.selected]="option === oldValue" [value]="option" (click)="onSelect(option)"&gt;{{option.label}}&lt;/mat-option&gt;
      &lt;/cdk-virtual-scroll-viewport&gt;
    &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>ts:</p>
  
  <pre><code>export class SingleSelectComponent implements OnInit {
    @Input() value;
    @Input('options')
    set options(value) {
      if (value) {
        this.filteredOptions = value.slice();
        this.data = value;
        this.initValue();
      }
    }
    @Output() formValue = new EventEmitter&lt;any&gt;();
  
    @ViewChild('singleInput') singleInput;
  
    selectControl = new FormControl('');
    filteredOptions;
    oldValue: any;
    data: any;
    destroy: Subject&lt;boolean&gt; = new Subject&lt;boolean&gt;();
  
    constructor(private appService: AppService,
                private translationService: TranslationService) { }
  
    ngOnInit() { this.selectControl.valueChanges.pipe(takeUntil(this.destroy)).subscribe((value)=&gt;{
        let valStr = typeof value === 'string' ? value : value.label;
  
        this.filteredOptions = valStr ? this.filter(valStr) : this.data.slice();
        this.value = this.selectControl.value;
        if(typeof value !== 'string' || value === '') this.formValue.emit(value);
      });
    }
  
    ngOnDestroy() {
      this.destroy.next(true);
      this.destroy.unsubscribe();
    }
  
    private filter(name: string) {
      return this.data.filter(option =&gt; this.normalizeInput(option.label).indexOf(this.normalizeInput(name)) &gt;= 0);
    }
  
    private normalizeInput(value: string) {
      return value.normalize('NFD').replace(/[\u0300-\u036f]/g, "").toLowerCase();
    }
  
    initValue() {
      let value = this.data.find(option =&gt; option.code === this.value.code);
  
      this.selectControl.setValue(value ? value : '');
      this.filteredOptions = this.filter(value ? value.label : '');
      this.oldValue = value;
    }
  
    displayFn(option) {
      return option ? option['label'] : '';
    }
  
    onSelect(option) {
      this.oldValue = option;
      this.singleInput.nativeElement.blur();
    }
  
    onBlur() {
      if(this.selectControl.value) {
        let found = this.data.find(option =&gt; this.selectControl.value.code === option.code);
  
        if(!found) {
          setTimeout(()=&gt; {
            this.selectControl.setValue(this.oldValue);
            this.filter(this.oldValue.label);
          }, 200);
        } else {
          this.filter(this.oldValue.label);
        }
      } else {
        this.oldValue = null;
        this.filteredOptions = this.data;
      }
    }
  
    onFocus() {
      let virtualScrollEl = document.body.getElementsByClassName('virtual-scroll')[0];
      if(virtualScrollEl) {
        virtualScrollEl.scrollTo(0, 0);
      }
    }
  }
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.single-input {
      height: 100%;
      min-width: 20%;
      max-width: 100%;
  }
  
  .virtual-scroll {
      height: 350px;
      overflow-x: hidden;
  }
  
  mat-option {
      height: 45px;
      font-size: 13px;
  }
  
  ::ng-deep .mat-autocomplete-panel.single-autocomplete {
      max-height: 350px;
  }
  
  .virtual-scroll ::ng-deep .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
      width: 100%;
  }
  </code></pre>
  
  <p>In the virtual-scroll class I have to add a fixed height. When items' height is smaller than 350px, it will create a blank space.</p>
  
  <p>This is the fiddle: <a href="https://stackblitz.com/edit/angular-fs4voi" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-fs4voi</a>. Since I'm totally new to Angular and I have made some modifications for autocomplete, it may cause this problem too.</p>
  
  <p>Thanks very much!</p>