Member 10033441 Ответов: 1

Как я могу показать сообщение об ошибке ниже в CSS


Я хочу показать сообщение об ошибке ниже.В настоящее время он показывает бок о бок.Пожалуйста, помогите мне.

<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;
}


Что я уже пробовал:

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


.erroClass{
  width: fit-content;
}

1 Ответов

Рейтинг:
1

Richard Deeming

Добавь flex-wrap к внешнему миру <div> и w-100 к сообщению об ошибке:

<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[^]