Angular: Display an element above and in relation to a button

Question

Angular: Display an element above and in relation to a button

Before I dive in, let me just mention that I have searched extensively for a solution to my problem without much luck. The issue is describing exactly what I'm trying to accomplish in a way that yields relevant search results.

If you're interested, here's the link to the StackBlitz demo: https://stackblitz.com/edit/angular-gvgj4s

The task at hand involves creating a component which allows users to add a special needs service along with a comment. Each service is displayed using ngFor and grid layout, complete with a "comment" button.

I've attempted to visualize my goal in this image:

An essential requirement is that the comment "pop-up" must appear relative to the corresponding "comment" button clicked. To facilitate this, I've incorporated ngTemplateOutlet within the ngFor loop. My dilemma arises when the "comment" button triggers movement throughout the grid layout.

I did manage to achieve positioning outside the ngFor loop inside a div, but it lacks the desired relative position to the clicked button.

Thank you in advance for your assistance!

css angular html typescript

Answer 1

Answer №1

Check out my latest update with the inclusion of position:relative and position:absolute;

relevant CSS adjustments:

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

after relevant HTML modifications:

<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

Check out my latest update with the inclusion of position:relative and position:absolute;

relevant CSS adjustments:

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

after relevant HTML modifications:

<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 3

Answer №2

Here is a suggestion for you to consider:

.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 4

Here is a suggestion for you to consider:

.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 5

Answer №3

Fortunately, there exists a convenient plugin that fulfills the exact requirement you have! It's known as X-Editable and is fully compatible with Angular. Visit for detailed documentation on the textarea editor (utilized as an in-place "popup")

To witness a straightforward showcase of this plugin, check out JSFiddle here. Provided below is all the necessary HTML, along with a bit of JavaScript:

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

Answer 6

Fortunately, there exists a convenient plugin that fulfills the exact requirement you have! It's known as X-Editable and is fully compatible with Angular. Visit for detailed documentation on the textarea editor (utilized as an in-place "popup")

To witness a straightforward showcase of this plugin, check out JSFiddle here. Provided below is all the necessary HTML, along with a bit of JavaScript:

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

Answer 7

Answer №4

Replace the position: relative; with flex order: X for a better layout:

Updated Stackblitz

HTML snippet:

<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>
        <!-- Consider using button instead of marking when clicked -->
        <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 snippet:

.column-1 {
  order: 1;
}

.column-2 {
  order: 2;
}

.column-3 {
  order: 3;
}

Answer 8

Replace the position: relative; with flex order: X for a better layout:

Updated Stackblitz

HTML snippet:

<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>
        <!-- Consider using button instead of marking when clicked -->
        <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 snippet:

.column-1 {
  order: 1;
}

.column-2 {
  order: 2;
}

.column-3 {
  order: 3;
}

Angular: Display an element above and in relation to a button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

My Python script using selenium isn't functioning properly - what could be the issue?

In the world of web development, utilizing HTTP GET

In React TypeScript, the property types of 'type' are not compatible with each other

Shape with a dark border div

Creating a secondary title for a Bootstrap Navigation Bar

Executing PHP code from a list item

Static addition of the Button to the parent div is crucial for seamless

Navigate through previous and next siblings in jQuery until a difference is found

What steps can I take to avoid MathJax equations overlapping with dropdown menus in Bootstrap version 5.2?

While using Angular CLI on GitLab CI, an error occurred indicating that the custom rule directory "codelyzer" could not be

Restrict the number of button clicks to only once every 5 minutes

Retrieving the first five rows from a table with data entries

Angular 4 animations failing to run on Safari iOS 9.3

What is the best way to integrate ng-bootstrap into an nx mono repository?

Having trouble downloading both an HTML file and a PDF file at the same time by clicking two separate buttons in an Angular 8 web API controller

Guide to displaying a pop-up modal containing text and an image when clicking on a thumbnail image

Angular 2 router hybrid application: URL resets after navigation

Organizing items in rows with alternating quantities using CSS within a fluid design

When the button is clicked, a fresh row will be added to the table and filled with data

Learn how to dynamically chain where conditions in Firebase without prior knowledge of how many conditions will be added