Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to populate the second column. Here's a snippet of my code:

presentations = [1,2,3,4,5,6,7,8]

<div class="row card-data">
    <div class="col-4" *ngFor="let presentation of presentations">
        <mat-card>
            Card content here
        </mat-card>
    </div>
</div>

.card-data {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

Currently, the cards are being displayed as rows instead of columns. What adjustments can I make to fix this issue?

htmlcssangularangular-material

Answer №1

It's best to avoid mixing layout columns with cards in this scenario. Instead, utilize flexbox for the cards and their container.

.card-data {
  max-height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

mat-card {
  padding: 10px;
  margin: 10px;
  background: pink;
}
<div class="row">
  <div class="col-4 card-data">
    <mat-card>
      card 1
    </mat-card>

    <mat-card>
      card 2
    </mat-card>

    <mat-card>
      card 3
    </mat-card>

    <mat-card>
      card 4
    </mat-card>

    <mat-card>
      card 5
    </mat-card>

    <mat-card>
      card 6
    </mat-card>

    <mat-card>
      card 7
    </mat-card>
  </div>
</div>

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

adjustable backdrops

Hi there, I'm trying to create a background image that resizes with the window while maintaining its proportions. I want to achieve this using CSS only. I've been searching for a solution but haven't found anything that works for me. I even ...

css

The functionality of ngModel seems to be malfunctioning when used within select options that are generated inside

I'm currently working on dynamically adding options to an HTML select element within a for loop. I am using [(ngModel)] to get the selected option, but initially no option is pre-selected. Here's a snippet of the code: <table align="center"& ...

angulartypescript

Utilizing Angular 2 for Element Selection and Event Handling

function onLoaded() { var firstColumnBody = document.querySelector(".fix-column > .tbody"), restColumnsBody = document.querySelector(".rest-columns > .tbody"), restColumnsHead = document.querySelector(".rest-columns > .thead"); res ...

angulardomtypescript

Using the `disableSince` option in `mydatepicker` for validating date of birth

Currently, I am utilizing the mydatepicker plugin for my calendar field, specifically for the Date of Birth field. It is important for me to disable future dates by setting the current date as a reference point. While exploring the documentation, I came ...

angulardatepickerdate

Is there a way to automatically re-run Angular unit tests when changes are made, perhaps through the

Apologies, I am having trouble figuring out how to phrase or search for this. Are you familiar with the concept of having unit tests running in a console window and automatically rerunning whenever changes are made and saved? I am interested in adding a ...

angularkarma-jasminekarma-runner

Guide on invoking an API with a private IP on an EC2 instance

I successfully deployed an Angular app and a Java REST-API on my ec2-instance. When accessing the Java REST-API via the public IP in my Angular app, everything works fine. However, if I try to use the private IP of my instance, it results in a connection ...

javaangularamazon-ec2amazon-vpcprivate-subnet

Encountering a 400 bad request error while trying to retrieve an authentication token from an API url in Angular

I encountered a problem in my Angular 6 application where I am receiving an Http 400 Bad Request error when attempting to call the API url for login token. The interesting thing is that the API works perfectly fine when accessed through POSTMAN. However, ...

angulartypescriptasp.net-web-apibearer-tokenbad-request

Error message: WebStorm shows that the argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type<any> | "root" | null} and InjectableProvider

Transitioning my app from Angular v5 to v6 has presented me with a TypeScript error when trying to define providedIn in my providers. The argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type | "root" | null} & ...

angulartypescriptwebstormangular6

Why does Angular throw a length-related error, while I am able to retrieve the length using console log if needed?

It appears that Angular is not receiving the correct data type it expects, yet the lack of errors in the terminal is puzzling. However, the console output states: https://i.stack.imgur.com/1xPsg.jpg If the length property can be detected (highlighted in ...

angulartypescriptgoogle-cloud-firestore

Tips for personalizing an angular-powered kendo notification component by adding a close button and setting a timer for automatic hiding

I am looking to enhance the angular-based kendo notification element by adding an auto-hiding feature and a close button. Here is what I have attempted so far: app-custom-toast.ts: it's a generic toast component. import { ChangeDetectorRef, Componen ...

javascriptangularkendo-ui

Is there a way to update a div element with an image without having to refresh

Currently working on a project for my studies where I am reading the x and y coordinates from a touch pad and drawing it in real time using PHP. I have created a draw page that takes these coordinates and displays them on an image, which is then shown on ...

phpjavascripthtml

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS. The structure of the HTML is as follows: <ul class="list"> <li class="item"> <a hr ...

htmlcsshtml-lists

Encountered an issue while loading the discovery document for the integration of AD FS using angular-oauth2-oid

I'm currently developing an angular SPA that requires authentication using AD FS, with Spring Boot as the backend. this.oauthService.configure({ redirectUri: window.location.origin + '/app/search', requireHttps: true, scope ...

angularoauth-2.0adfsangular-oauth2-oidc

The enigmatic borders of a website

While working on a custom Wordpress theme, I encountered an issue where the entire body of the page was slightly pushed down. Using Chrome's inspector tool, I identified the following problematic styles: <style type="text/css" media="screen> ...

csswordpresswordpress-theming

Div over which scroll editing is performed

I want to develop a website where my title div remains fixed in one position as I scroll down. However, the issue arises when I set it to be fixed because my navigation button on the left disappears and I'm unsure how to keep it in place. // JavaSc ...

htmlcss

The glyphicons in Bootstrap are not appearing

My angular app is built using bulp angular and the component. I incorporate Sass (Node) into the project. I decided to switch to the flatly theme, which I downloaded from the bootswatch website and inserted it into _bootstrap.scss. // Core variables a ...

javascriptcssangularjstwitter-bootstrap-3sass

The Bootstrap nav-justified feature fails to utilize the entire width available

Have you heard of the bootstrap-4 class called nav-pill? It's meant to make links have equal width and occupy all horizontal space. To achieve equal-width elements, simply use .nav-justified, as suggested. This will ensure that nav links take up al ...

htmlcssbootstrap-4navjustify

Unable to render canvas element

Hey guys, I'm trying to display a red ball on the frame using this function but it's not working. I watched a tutorial and followed the steps exactly, but I can't seem to figure out what's wrong. Can someone please help me with this? I ...

javascripthtmlcanvas

Execution of the RxJS pipe Finalize operator initiated prior to Observable finalization

After updating the detailed information of users, I attempted to retrieve the updated user list. Initially, I used this.mediaService.updateImports(): Observable<any> to update the user details. Next, I tried displaying the updated user details us ...

angularrxjs

Navigating to a URL parameter outside of the <router-outlet>

Currently, I am developing a simulated e-commerce platform using Angular 11. The structure of my app.component.html file is outlined below: <mat-toolbar> <mat-toolbar-row> <!-- Various buttons and links --> <button *ngIf=&quo ...

angularangular-router