Is there a streamlined approach to reducing the code for an Angular Bootstrap card with a fixed length and height?

Is there a more efficient way to distribute a fixed number of cards with fixed dimensions in three rows?

Currently, I am manually coding all 33 cards spread across 3 rows - 11 cards per row. Please excuse any mistakes in my code as I am still a beginner and learning. Any assistance would be greatly appreciated. Thank you in advance! :)

My HTML includes details on how the cards are displayed. The Angular component is provided 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 {
  /** Switches from standard layout to one column per row based on screen size */

  constructor(){}

}

...

cssangularjshtmlangularjs-ng-repeat

Answer №1

click here to see the image

Hey there, I have a suggestion for enhancing how your data is presented. In your AgvcardComponent file, you can incorporate the following code snippet:

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

}

Incorporating the above code in the AgvcardComponent template will result in:

<!-- Top -->
<div class="top-dashboard-details">
  <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>

<!-- Middle -->
<div class="middle-dashboard-details">
  <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>

<!-- Bottom -->
<div class="bottom-dashboard-details">
  <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>

To complete the component, add some SCSS styling like so:

* {
    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;
 }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Python and Selenium to interact with AngularJS dropdown lists for non-select elements

Currently, I am leveraging Selenium to extract information from this website. Upon clicking a button on the page, a dropdown list appears, and my goal is to be able to select different values from this list using my program. Having conducted extensive res ...

pythonangularjsseleniumdropdown

Ways to align page title text at the center of the banner image without using flexbox or grid layout?

Seeking advice on how to vertically center the banner text in the middle of the banner image for a CSS-only psd conversion project. Any ideas on achieving this goal without utilizing flexbox or grid? header { background-image: url(../assets/main-ban ...

htmlcsslayoutresponsive-designcss-selectors

I am experiencing an issue with the initial for-loop in my code as it is not

Upon clicking the start button, the score button, as well as the try again or correct button, are not being updated. Can someone help me figure out what's wrong? I believe the issue lies within this section of the code: for (i=0; i<5; i++) { do ...

javascripthtmlcss

Enable Element Blocks Content Below When Toggled

Is there a way to make a toggle element completely block out all content below it? I attempted to set the width and height to 100%, but it ended up cutting off the content inside the toggle element. ...

htmljquerycsstoggle

The issue with AngularJS ng-show and $timeout functionality not functioning as expected

As a newcomer to AngularJS, I recently started an individual project utilizing ng-show and if else statements with $timeout. Despite my efforts, I have been unable to make the answers timeout after being displayed for a few seconds. I've tried various ...

javascriptangularjs

What are some ways I can customize the appearance of a canvas element?

After discovering a canvas animation, I decided to customize it for my own needs. However, due to the fact that a canvas and its shapes are not DOM elements, I am struggling to style it properly. You can view my current progress here. When you hover over ...

htmlimagecanvasmask

The NgbTooltip does not activate when hovering over a <td> cell

I'm currently facing an issue with implementing ngbTooltip on <table> elements. Initially, I had trouble with <th>, but that was resolved by using the container attribute after referring to this helpful post. The main challenge arises ...

htmlangularbootstrap-4ng-bootstrap

HTML5: Implementing shared web workers for efficient communication across multiple connections

As far as I know, one of the main advantages of HTML5's shared web workers is their ability to handle multiple connections within a single separate thread of execution. I'm curious if anyone has managed to achieve multiple connections working as ...

htmlconnectionweb-worker

Ways to eliminate the vertical scroll feature in a kendo chart

I am encountering an issue while loading a kendo chart inside grid-stack.js where I am unable to resize the height properly. Whenever I decrease the height, a vertical scroll appears which should not happen. I have tried setting the height to auto and refr ...

javascriptjquerycsskendo-chartgridstack

Retrieve the ID using AngularJS and save it to resources

As a newcomer to AngularJS, I have a query regarding saving Tasks using a resource. When the Task is saved, it correctly sends the information to the database and the server responds with the ID of the created Task after receiving the POST request. The co ...

scalaresourcesangularjsplayframework-2.0

What is the best way to move between websites or pages without having to reload the current page using a selector?

Have you ever wondered how to create a webpage where users can navigate to other websites or pages without seeing their address, simply by selecting from a drop-down menu? Take a look at this example. Another similar example can be found here. When visit ...

javascriptphphtmlcssajax

Using VB.NET with Selenium to locate and interact with dropdown elements

My knowledge of selenium is limited, and I'm facing difficulty in selecting an element from a dropdown menu on AliExpress using vb.net. The issue arises when the driver either fails to locate the intended element or finds another element with the same ...

html.netvb.netseleniumselenium-webdriver

Is it expected for every element to return true when checking their visibility with isDisplayed() after performing a get() method

Why are WebDriver get() and isDisplayed() methods not functioning as expected? According to the documentation: This is done using an HTTP GET operation, and the method will block until the load is complete As seen in similar questions such as Wait fo ...

htmlasynchronousseleniumwebdriverrendering

Transmitting information from JavaScript to PHP server results in receiving a 500 Error

I have been exploring various code examples and techniques to transmit data from my website to the server's database. After evaluating different options, I concluded that making an ajax call to send the data would be the most efficient method. Here i ...

phpjqueryhtmlcssajax

Can you help me figure out how to make a header that sticks to the top of the page as you scroll horizontally, and a sidebar that stays in place as you scroll vertically with

I am currently working on developing a layout that includes a sticky header and sidebar for my content list. My goal is to have the sidebar scroll down as I move through the page content, while also ensuring that the header scrolls horizontally along with ...

htmlcss

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

javascripthtmlcssvue.jsvuetify.js

Difficulty encountered in closing div by clicking the background with the help of jquery

I am facing a challenge with properly closing a div container and restoring it to its original state when I click outside of it. Despite trying various solutions from stackoverflow and extensive internet research, I have been unable to find or come up with ...

javascriptjqueryhtmlcssweb

How to eliminate a hyperlink from an HTML element with the help of JQuery

Recently, I was assigned to revamp a website for the company I work for. However, upon closer inspection, I realized that the website is quite messy and relies heavily on templates, resulting in certain elements being auto-generated as active links. The i ...

javascriptjqueryhtmlcss

How to place text on top of a thumbnail in Bootstrap using HTML

I've come across similar questions here, but none of the suggested solutions have worked for me. (I attempted making the image a background as recommended on how to display text over an image in Bootstrap 3.1, but it didn't seem to be effective) ...

htmlcssimagetwitter-bootstrap

How can you utilize CSS grid to position an alternate symbol alongside ordinary text?

Does anyone have suggestions on how to align an "alt symbol" with "regular text"? I'm struggling to center both elements without resorting to hacky solutions. Currently, I am using CSS grid, but I am open to exploring other solutions that are easy an ...

htmlcsscss-gridcentering