Угловой: сделать элемент сверху и относительно кнопки

Question

Прежде всего, позвольте мне предвосхитить это, сказав, что на это уже можно было бы где-то ответить, но я не мог найти, как точно описать, чего именно я пытаюсь достичь, по крайней мере, не в формулировке, в которой было какое-либо соответствиеРезультаты.

Вот стекаблиц: https://stackblitz.com/edit/angular-gvgj4s

Я пытаюсь создать компонент, который позволяет пользователю добавлять службу особых потребностей, а также добавлять к ней комментарий.Каждый сервис перечисляется с помощью ngFor и display: grid, и включает кнопку «комментарий».

Я попытался проиллюстрировать, что я пытаюсь достичь на этом изображении:

Важной особенностью является то, что комментарий «всплывающий» должен располагаться относительно нажатой кнопки «Комментарий».Из-за этого я включил ngTemplateOutlet в цикл ngFor.Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии кнопки «Комментарий» все элементы get перемещаются в сетке

Я пытался использовать div вне цикла ngFor, который работает, но он не расположен относительнокнопка, на которой она нажата.

Заранее спасибо!

Answer 1

Это то, что у меня есть после добавления position:relative и position:absolute;

релевантно CSS изменить:

.add-comment-container {
  position: relative;  
  height: 5rem;
  background-color: white;
  z-index: 1;
  left:20%;
  border: solid 1px green;
  border-radius:20%;
  padding:5%;
}

.commentComtainer{
  position:absolute;
}

после соответствующего HTML изменения:

<section class="p-md green-border">
  <div class="common-ssrs">
    <div *ngFor="let service of commonSsrs" class="d-flex justify-content-between">

    <div class="d-flex align-items-center">{{service.code | uppercase}}</div>

      <div class="actions d-flex align-items-center">
        <button mat-mini-fab class="add-button" id="'wt-common-ssrs-add-' + service.code"><span class="font-title-1 add-text">+</span></button>
        <!-- Maybe change to button, to avoid marking when clicking -->
        <div class="mat-icon-container">
          <button (click)="editComment(service)" class="color-gray-2 cursor-pointer add-comment" id="'wt-common-ssrs-comment-' + service.code">comment</button>
        </div>        
      </div>
      <div *ngIf="serviceCommentEdit && serviceCommentEdit.id === service.id" class='commentComtainer'>
        <ng-container  *ngTemplateOutlet="EditSsrComment; context: { service: service, index: index}"></ng-container>
      </div>
    </div>
  </div>
</section>

<!-- <div *ngIf="serviceCommentEdit" class="add-comment-container p-md d-flex"> -->

  <ng-template let-service="service" let-serviceIndex="index" #EditSsrComment  >
      <div class="add-comment-container p-md d-flex">
        <textarea matInput></textarea>
        <br />
        <button class="d-flex align-self-end" (click)="closeEditComment()">clear</button>

      </div>
  </ng-template>
<!-- </div> -->

Answer 2

Пожалуйста, попробуйте это:

.common-ssrs > div {
  position: relative;
  flex-wrap: wrap;
}
.common-ssrs > div > div:not(.d-flex) {
  width: 100%;
}
.common-ssrs > div > div:not(.actions) .add-comment-container {
  position: absolute;
  left: 0;
  top: 100%;
  width:100%;
}

Answer 3

Избавьтесь от position: relative; и используйте вместо него flex order: X:

Изменен Stackblitz

HTML код:

<section class="p-md green-border">
  <div class="common-ssrs">
    <div *ngFor="let service of commonSsrs" class="d-flex justify-content-between">

    <div class="d-flex align-items-center column-1">{{service.code | uppercase}}</div>

      <div class="actions d-flex align-items-center column-3">
        <button mat-mini-fab class="add-button" ><span class="font-title-1 add-text">+</span></button>
        <!-- Maybe change to button, to avoid marking when clicking -->
        <div class="mat-icon-container">
          <button (click)="editComment(service)" class="color-gray-2 cursor-pointer add-comment">comment</button>
        </div>        
      </div>
      <div class="column-2" *ngIf="serviceCommentEdit && serviceCommentEdit.id === service.id">
        <ng-container  *ngTemplateOutlet="EditSsrComment; context: { service: service, index: index}"></ng-container>
      </div>
    </div>
  </div>
</section>

  <ng-template let-service="service" let-serviceIndex="index" #EditSsrComment>
    <div class="add-comment-container p-md d-flex">
      <button class="d-flex align-self-end" (click)="closeEditComment()">close</button>
      <textarea matInput></textarea>
    </div>
  </ng-template>

Код CSS:

.column-1 {
  order: 1;
}

.column-2 {
  order: 2;
}

.column-3 {
  order: 3;
}

Answer 4

К счастью, есть плагин, который делает именно то, что вы пытаетесь заархивировать!Он называется X-Editable и совместим с Angular.См. http://vitalets.github.io/angular-xeditable/#textarea для документации по редактору textarea (как «всплывающее окно»)

Вы можете увидеть простую демонстрацию этого плагина на JSFiddle здесь .Это весь HTML-код, который вам понадобится, а также JS:

<code><a href="#" editable-textarea="user.desc" e-rows="7" e-cols="40">
    <pre>{{ user.desc || 'no description' }}