0

This is demo app that uses mat-autocomplete, I picked from stackoverflow post enter link description here , I want to display option entire value. When the value is long. I found similar question asked enter link description here but this hasn't solved my problem. I can scroll and see the value, can modify css style so the scroll bar is properly visible.

Looks like remaining part of scroll bar is hidden!

I tried 

.mat-option {

z-index:5000;
height:300px;
}

Nothing has worked out!

It would be better if the element was shown completely.

enter image description here

Code snippet template.html

  <mat-form-field class="example-full-width">
    <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete" panelWidth="320px">
      <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
        <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
        <span>{{state.name}}</span> |
        <small>Population: {{state.population}}</small>
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

typescript.ts

 states: State[] = [
    {
      name: 'Arkansas',
      population: '2.978M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_Arkansas.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Arkansas.svg'
    },
    {
      name: 'California CaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCaliforniaCalifornia',
      population: '39.14M',
      // https://commons.wikimedia.org/wiki/File:Flag_of_California.svg
      flag: 'https://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_California.svg'
    }

  ];

 constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
      .pipe(
        startWith(''),
        map(state => state ? this._filterStates(state) : this.states.slice())
      );
  }

  private _filterStates(value: string): State[] {
    const filterValue = value.toLowerCase();

    return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0);
  }
karansys
  • 2,449
  • 7
  • 40
  • 78
  • Please don't link outside websites alone. If you are able to fix the problem or if the website ever changes / goes down your question will be useless to anyone visiting in the future. A [Minimal, Reproducible example (or MCVE)](https://stackoverflow.com/help/minimal-reproducible-example) helps remedy this and gives everyone more info to help you with. – Libra Jan 09 '20 at 18:42
  • Hi Latif Sorry, I have updated my question. Previously link was wrong one – karansys Jan 09 '20 at 18:48
  • That isn't the issue, please re-read my comment. It doesn't matter if it is the correct site or not, I didn't even open it – Libra Jan 09 '20 at 18:52
  • I edited question gave code snippet, hope that is clear – karansys Jan 09 '20 at 18:57

1 Answers1

0

You have 3 ways to solve this

1.Adding scroll to mat-option as you already have that in your question

2.Giving width to mat-select, but this will also be issue if mat-option is too long.

3.This option is to wrap text - add below css to mat-option

.mat-option {
 word-break: break-all;
 white-space: normal;
 height: unset;
}
Sameer
  • 4,758
  • 3
  • 20
  • 41