Click here to Skip to main content
15,216,954 members
Rate this:
Please Sign up or sign in to vote.
See more:
I want to show the error message below.Currently it is showing side by side.Please assist me.

<div class="d-flex justify-content-start mb-5" *ngIf="storeName.indexOf('faprint') != -1">
     <div class="card create-recipient-card" style="max-width:250px !important;max-height: 200px !important;">
       <div class="card-body card-padding" (click)="CallUploadFile()" style="cursor: pointer;">
         <div *ngIf="hasNoDelegateAccessWithReadOnly">
           <input type="file" #uploadfile style="display:none" [disabled]="!hasNoDelegateAccessWithReadOnly" (change)="fileChangeupload($event)" accept=".xls,.xlsx,.csv" id="uploadfile" class="custom-file-input">
         </div>
         <div class="d-flex flex-row justify-content-center pt-4">
           <svg xmlns="http://www.w3.org/2000/svg" fill="#0044e9" viewBox="0 0 20 20" width="32" height="34" data-svg="did-plus-circle"><path d="M 10 0 c 5.5 0 10 4.5 10 10 s -4.5 10 -10 10 S 0 15.5 0 10 S 4.5 0 10 0 Z M 10 0.9 C 5 0.9 0.9 5 0.9 10 S 5 19.1 10 19.1 s 9.1 -4.1 9.1 -9.1 S 15 0.9 10 0.9 Z M 10 5.5 c 0.3 0 0.5 0.2 0.5 0.5 v 3.6 h 3.6 c 0.3 0 0.5 0.2 0.5 0.5 s -0.2 0.5 -0.5 0.5 h -3.6 v 3.6 c 0 0.3 -0.2 0.5 -0.5 0.5 s -0.5 -0.2 -0.5 -0.5 v -3.6 H 5.9 c -0.3 0 -0.5 -0.2 -0.5 -0.5 s 0.2 -0.5 0.5 -0.5 h 3.6 V 5.9 C 9.5 5.7 9.7 5.5 10 5.5 Z" /></svg>
         </div>
         <h5 class="card-title d-flex justify-content-center pt-2">Upload new<br>recipient list</h5>

       </div>
     </div>
     <div class="alert my-1 alert-danger p-2 rounded-0 erroClass" *ngIf="errorMsg.length>0">{{errorMsg}}</div>
   </div>


.erroClass{
  width: fit-content;
}


What I have tried:

<div class="alert my-1 alert-danger p-2 rounded-0 erroClass" *ngIf="errorMsg.length>0">{{errorMsg}}</div>


.erroClass{
  width: fit-content;
}
Posted
Updated 2-Jun-20 0:17am

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

Add flex-wrap to the outer <div> and w-100 to the error message:
<div class="d-flex flex-wrap justify-content-start mb-5" *ngIf="storeName.indexOf('faprint') != -1">
    ...
    <div class="alert w-100 my-1 alert-danger p-2 rounded-0" *ngIf="errorMsg.length>0">{{errorMsg}}</div>
</div>
Edit fiddle - JSFiddle - Code Playground[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100