How to add horizontal scroll to mat autocomplete

Question

I am running angular app , I have auto complete on this, I want to add horizontal scroll to the mat-option, I tried applying css style

.cdk-overlay-pane {
  overflow-x: auto;
}

 then applying syle as told in this docuemnt [enter link description here][1] showPanel: boolean

  <mat-option class="CustomerDropDown" showPanel="true" ...

extended question

<mat-form-field >
  <input matInput [matAutocomplete]="auto"  [formControl]="customerFilterControl">
  <mat-autocomplete panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn" style="width:750px;">
     <mat-option  *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID + '('+ customer.AccountName + ')'" (click)="onCustomerChange(customer)">
      {{customer.AccountID}} ({{customer.AccountName}})
     </mat-option>
  </mat-autocomplete>
</mat-form-field>

Both the attempts failed!!

score 0 · Answer 1 · answered Nov 27 '19 at 12:21

0

Try the following CSS. It worked for me.

::ng-deep .custom-mat-option .mat-option-text {
  overflow: auto;
  text-overflow: unset;
  // color: green;
}

custom-mat-option is a class I have added to the <mat-option> element to increase the css specifity.

Stackblitz

answered Nov 27 '19 at 12:21

ChrisY

1,681
10
12

Hi Chris your solution works in Stackblitz but in my app I don't find mat-option-text class at all, I am restricted in my application to use only angular6 . this might be the difference else solution is perfect – karansys Nov 27 '19 at 14:17
Which angular-material version do u use? – ChrisY Nov 27 '19 at 15:40
it is "@angular/material": "^6.4.7", – karansys Nov 27 '19 at 16:24
According to the source of there should be a `mat-option` in Angular Material 6.4.x. (https://github.com/angular/components/blob/6.4.x/src/lib/core/option/option.html) Do you use the `` element in your HTML? Can you extend your question with the HTML, which show the usage of the `mat-autocomplete`? – ChrisY Nov 27 '19 at 16:50
I do use mat-option to populate data, but I don't see mat-option-text – karansys Nov 27 '19 at 16:59
https://github.com/angular/components/blob/6.4.x/src/lib/core/option/option.html#L4 – ChrisY Nov 27 '19 at 17:03

score -1 · Answer 2 · answered Nov 27 '19 at 11:27

HTML

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

TS File

import {ChangeDetectionStrategy, Component} from '@angular/core';

/** @title Basic virtual scroll */
@Component({
  selector: 'cdk-virtual-scroll-overview-example',
  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
  templateUrl: 'cdk-virtual-scroll-overview-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample {
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);
}

CSS

.example-viewport {
  height: 200px;
  width: 200px;
  border: 1px solid black;
}

.example-item {
  height: 50px;
}

and also follow this link scrolling

How to add horizontal scroll to mat autocomplete

2 Answers2

Linked