How can I make multiple lines display on a mat-select on separate lines in Angular?


I have a mat-select with 5 mat-options within it to choose from. Each mat-option has two lines within it that are h2 tags. How do I make the selection display with the two lines on their own line? They are currently displaying one after another without a space, even though they have the correct formatting in the options dropdown section. Any help would be appreciated. Here is my code. Thanks in advance.

     <mat-form-field>
      <div>
        <mat-select [(value)]="selected">
          <mat-option value="default">
            <h2>Select a Product</h2>
            <h2>
              Expand to see a list of eligible products
            </h2>
          </mat-option>
          <mat-option
            class="options"
            *ngFor="let Product of Products"
            [value]="Product"
           >
            <h2 class="title">{{ Product.Name }}</h2>
            <h2>{{ Product.Type }}</h2>
          </mat-option>
        </mat-select>
      </div>
    </mat-form-field>



::ng-deep .mat-select-value-text {
word-wrap: break-word;
white-space: normal;
height: 70px;

}

Source: CSS – Stack Overflow

November 23, 2021
Category : News
Tags: angular | css | html | mat-form-field | mat-select

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.