CODEWITHSUNDEEP
htmlcssangularflexboxdisplay
realIsComplex
realIsComplex

Reputation: 99

display flex does not break long lines as expected

Trying to display a list of things in a single line using flex display. I am using angular 7 for development. Below is the HTML I implemented:

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div class="d-flex">
    <div *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="i > 0">,</span><span *ngIf="allergy"> {{ allergy }}</span>
      <span *ngIf="!allergy">None</span>
    </div>
  </div>
</div>

d-flex is the bootstrap display class:

.d-flex {
  display: -webkit-box!important;
  display: -ms-flexbox!important;
  display: flex!important;
}

In my component allergies is set to

allergies = ['dermatological allergies', 'dust', 'pollen', 'mold'];

Display:

enter image description here

As seen, the list does not break properly and the display is distorted. This happens when the list length exceeds the computed column width. How can I display it as a list that breaks properly as expected? Please let me know if I can improve my question or if I can provide any more information.

Upvotes: 0

Views: 733

Answers (2)

miselking
miselking

Reputation: 3083

I think this is what you want:

<div class="d-flex">
  <span>Other:&nbsp;</span>
  <div>
    <ng-container *ngFor="let allergy of allergies; let i = index">
      <span *ngIf="allergy">{{ allergy }}</span><span *ngIf="i < allergies.length - 1">, </span>
      <span *ngIf="!allergy">None</span>
    </ng-container>
  </div>
</div>

Here is a stackblitz example showing how this looks like.

Hope this helps...

Upvotes: 1

Wandrille
Wandrille

Reputation: 6821

With angular, I suggest you to use Flex-layout from Angular.

With your to wrap your item, use row wrap

With your code, you can also do:

<div class="d-flex">
  ...
  ...
    <div *ngFor="let allergy of allergies; let i = index" class="d-flex">
       ...
    </div>
  </div>
</div>

Upvotes: 1

Related Questions