Search code examples
javascriptangularjsangularclipping

Angular js text clippings , text are being clipped if its more than 150 characters

As you can see in the image below the question is being clipped when its morethan 150 characters , what is the best solution to this ? any advice ? Thanks. I dont want the text or the question get clipped if its morethan 150 characters.

It should be dynamic and should adjust.

image

Angular

<div fxLayout="row" fxLayoutGap="24px">
        <div fxFlex fxLayout="row">
          <mat-form-field appearance="outline" class="pr-4" fxFlex>
            <mat-label>Search Question</mat-label>
            <mat-chip-list #chipList>
              <mat-chip *ngIf="hasSelectedQuestion()" [selectable]="selectable" removable="true"
                (removed)="deselectQuestion()">
                {{form.controls.question.value.question}}
                <mat-icon matChipRemove>cancel</mat-icon>
              </mat-chip>
            </mat-chip-list>
            <input matInput #questionSearch [ngClass]="!hasSelectedQuestion() ? '' : 'hidden'" [matAutocomplete]="auto"
              [matChipInputFor]="chipList" formControlName="question" required class="full-width" trim />
            <mat-icon matSuffix>search</mat-icon>
            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
              <mat-option *ngFor="let question of questions$ | async" [value]="question">
                {{question.question}} <span class="disabled-text">({{question.choice ? 'Yes/No' : 'Comment only'}})
                </span>
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </div>
      </div>
Solution 
  • <mat-chip-list>
      <!-- Height auto allows the content to grow as per content -->
      <mat-chip style="width: 400px; height: auto; overflow: hidden;">

        <!-- max-height will limit grow of element after which overflow-y auto will allow scrolling -->
        <div
          style="
            margin-right: 10px;
            overflow-y: auto;
            height: auto;
            max-height: 60px;
          "
        >
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium
          rem a error obcaecati iste laborum doloribus numquam commodi
          exercitationem hic saepe non laudantium suscipit ullam, esse sequi qui
          aliquid aliquam.
        </div>
        <mat-icon style="position: absolute; right: 0;">cancel</mat-icon>
      </mat-chip>
    </mat-chip-list>