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

Is it a bug that using addClass or toggleClass with JQuery inside a click method does not seem to be functioning properly?

The image in the row wrap container spills over slightly

Transitioning between sections by clicking on a navigation menu item

Strategies for incorporating a JSON variable into the HttpClient query parameters in an Ionic 5 application

Ways to transfer specific properties from one object to another in TypeScript

how to navigate to a different page programmatically upon selecting an option in the side menu

Leveraging string interpolation in Typescript with a string sourced from a file

What is the best method for obtaining a modified image (img) source (src) on the server side?

Controlling the back DIV while maintaining overlapping layers

Obtain redirected JSON data locally using Angular 5

Encountered an error trying to access '0' property of an undefined object when iterating through data in angular framework

Trigger the callback function once the datatables DOM element has finished loading entirely

When the textfield mui is set to shrink, an additional space appears in the label when using a font size of 12px

Troubleshooting Problem with Angular Material 2's Mat-Paginator [Length] Bug

Problem with ngStyle: Error indicating that the expected '}' is missing

Issues may arise in TypeScript when you are working with an array of objects along with other properties within a type

Exploring PHP Queries with Div Classes

Updating dynamic content in IBM Worklight V6.1 with jQuery Mobile v1.4.3 requires waiting for the DOM to load

Applying box shadow to input group addon in Bootstrap 3 using CSS

Using JavaScript, aim for a specific element by its anchor headline