CODEWITHSUNDEEP
cssangularangular8
user14028818
user14028818

Reputation:

Fixing position of buttons in grid

I am working on a angular app. I have following grid.

.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 2.5vw;
    grid-auto-rows: 35%;
}

This grid will make 4 rectangle in parallel something like this.


    ...   ....    ....   ...
    ...   ....    ....   ....
    ...   ....    ....   ....

These dotted lines represents rectangles. In these rectangles I have buttons. The problem I am facing is if I use *ngIf in button and when *ngIf becomes false. That particular button is not visible but when that particular button is not visible, all the other buttons behind it automatically moves up by 1 position. How I can fix the position of buttons in grid? I don't want button to move their positions

Upvotes: 0

Views: 375

Answers (1)

Derek Wang
Derek Wang

Reputation: 10204

It seems you are generating the buttons using inside ngFor loop like this.

<div class="grid">
  <button *ngFor="let i of inputs">...</button>
</div>

To resolve the problem of moving position when button is hidden by *ngIf, the good way is to put div as the main child of grid class and put button inside it as follows.

<div class="grid">
  <div *ngFor="let i of inputs">
    <button *ngIf="...">...</button>
  </div>
</div>

If you put button inside div, even if the button is hidden by ngIf, the div will still remain so the position won't be changed.

Upvotes: 1

Related Questions