Search code examples
cssangularjshtmlangularjs-ng-repeat

Angular Bootstrap card with fixed lenght and height. Is there a way to minmize the code?

I would like to know if there is a simpler way to distribute fixed number of cards of fixed dimensions in three rows?

For now, I am hardcoding all 33 cards distributed in 3 rows - 11 per row. Excuse for my code, I am a beginner and still learning. Any help could be appreciated. Thanks in advance! :)

My HTML code shows you information about how I have decided to show the cards. I have added the angular component for reference.

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';


@Component({
  selector: 'app-agvdashboard',
  templateUrl: './agvdashboard.component.html',
  styleUrls: ['./agvdashboard.component.css'],
})
export class AgvdashboardComponent {
  /** Based on the screen size, switch from standard to one column per row */
  
  constructor(){}

  
}





<html>
  <head>
  
     <!--Container description starts here-->
  
  </head><div class="container">

  <h2 class="Heading-dashborad">AGV-Dashboard</h2>

  <!-- Selecting Load No from the drop down menu -->

  <app-loadselector></app-loadselector>

  <!-- Button triggers which are displayed after selecting load No -->
  <div class="load-unload-buttons">
    <div class= "invisible">
    <button type="button" class="btn btn-primary" tooltip="Click to Load">
   Load
  </button>
  <button type="button" class="btn btn-primary" tooltip="Click to Unload">
    Unload
  </button>
  </div>
</div>

<app-agvcard></app-agvcard>
 
 
<div class="top-dashboard-details">
 <div class="row ">
    
         
         <div class="col-md-1">
          
            <div class="card" ngbPopover="Load No.1
            RowNo.2
            SSCC1: 3576046640081210
            SSCC2: 3576046640081210
            SSCC3: 3576046640081210
            " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
                <div class="card-body">
                    <h4 class="card-title">Material No.</h4>
                    <p class="card-text">61617</p>
                  </div>
                </div>
              
</div>

<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
</div>
</div>


<div class="middle-dashboard-details">
<div class="row">
   <div class="col-md-1">
      <div class="card" ngbPopover="Load No.1
      RowNo.2
      SSCC1: 3576046640081210
      SSCC2: 3576046640081210
      SSCC3: 3576046640081210
      " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
          <div class="card-body">
              <h4 class="card-title">Material No.</h4>
              <p class="card-text">61617</p>
            </div>
          </div>
        </div>

 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
 <div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
</div>
</div>


<div class="bottom-dashboard-details">
<div class="row">
    <div class="card" ngbPopover="Load No.1
            RowNo.2
            SSCC1: 3576046640081210
            SSCC2: 3576046640081210
            SSCC3: 3576046640081210
            " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
                <div class="card-body">
                    <h4 class="card-title">Material No.</h4>
                    <p class="card-text">61617</p>
                  </div>
                </div>

<div class="col-md-1">    
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
</div>
<div class="col-md-1">
    <div class="card" ngbPopover="Load No.1
    RowNo.2
    SSCC1: 3576046640081210
    SSCC2: 3576046640081210
    SSCC3: 3576046640081210
    " triggers="mouseenter:mouseleave" popoverTitle="Pop title">
        <div class="card-body">
            <h4 class="card-title">Material No.</h4>
            <p class="card-text">61617</p>
          </div>
        </div>
  </div>
</div>
</div>

</div>

</html>

Solution

  • enter image description here

    Hi, I think this is a better way to display your data. On your AgvcardComponent I added this:

    export class AgvcardComponent implements OnInit {
  cards = {
   ngbPopover: 'Load No.1 RowNo.2 SSCC1: 3576046640081210 SSCC2: 3576046640081210 
   SSCC3: 3576046640081210',
   triggers: 'mouseenter:mouseleave',
   popoverTitle: 'Pop title',
   cardTitle: 'Material No.',
   cardText: '61617'
  };
  elements = [];
  constructor() { }
  ngOnInit() {
  for (let i = 0; i < 11; i++) {
    this.elements.push(this.cards);
   }
  }

}

    Then in the AgvcardComponent template:

    <!-- Top -->
<div class="top-dashboard-details">
  <!-- <div class="row"> -->
   <div *ngFor="let el of elements" class="col">
     <div class="card">
       <div class="card-boddy">
      <h6 class="card-title">
        {{el.cardTitle}}
      </h6> 
      <p class="card-text">
        {{el.cardText}}
      </p>
    </div>
   </div>
  </div>
 <!-- </div> -->
</div>

<!-- Middle -->
<div class="middle-dashboard-details">
 <!-- <div class="row"> -->
  <div *ngFor="let el of elements" class="col">
  <div class="card">
    <div class="card-boddy">
      <h6 class="card-title">
        {{el.cardTitle}}
      </h6> 
      <p class="card-text">
        {{el.cardText}}
      </p>
      </div>
    </div>
  </div>
 <!-- </div> -->
</div>

<!-- Bottom -->
<div class="bottom-dashboard-details">
<!-- <div class="row"> -->
  <div *ngFor="let el of elements" class="col">
   <div class="card">
     <div class="card-boddy">
       <h6 class="card-title">
        {{el.cardTitle}}
       </h6> 
       <p class="card-text">
        {{el.cardText}}
       </p>
     </div>
   </div>
 </div>
<!-- </div> -->
</div>

    Finally I added some SCSS to that component:

    * {
    padding: 0 !important;
    margin: 0 !important;
}
.top-dashboard-details, .middle-dashboard-details, .bottom-dashboard-details {
    margin-bottom: 10px !important;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    grid-gap: 10px;
 .card {
    padding: 5px !important;
 }
}