Vertical arrangement of Angular Material cards

I need help arranging items in an array vertically using cards, but I'm facing an issue with spacing between them. Even after trying padding, it doesn't seem to work as expected.

card image

Any suggestions on how I can space out these cards?

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="asd cardPardding" *ngFor="let title of titles">
      <p>
      {{title}}
      </p>
    </mat-card>
  </ng-container>

  <ng-template #noTitle>
    <mat-card class="asd cardPardding">
      <p>
      No title !
      </p>
  </mat-card>
  </ng-template>

This is the CSS code:

.asd {
  width: 80%;
  margin: 0 auto; /* Added */
}

.inputasd {
  width: 100%;
}

.cardPadding {
  padding: 100px;
  margin-bottom: 50px;
}

Answer №1

.component.html

<ng-container *ngIf="titles?.length; else noTitle">
    <mat-card class="my-class-name asd cardPardding" *ngFor="let title of titles">
        <p>
            {{title}}
        </p>
    </mat-card>
</ng-container>

<ng-template #noTitle>
    <mat-card class="asd cardPardding">
        <p>
            No title !
        </p>
    </mat-card>
</ng-template>

.css/.scss file

.my-class-name{
    margin-bottom: 10px;
    ... 
}

Answer №2

Hours were wasted trying to correct this issue. It finally dawned on me that I had identified the problem incorrectly, when it turned out my error was a simple typo in the class name. As it turns out, margin does indeed work. Just goes to show, one wrong letter can make all the difference. Appreciate the help!

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

Is it possible for inline-block list items to wrap words onto new lines?

I'm working on displaying a series of details within an unordered list inline, but facing an issue with some list items being too long for the relatively small area available. This is the unordered list I'm adding to my view: "<ul class=&apo ...

Angular error: Trying to subscribe to an undefined property

As I dive into my inquiry, it's important to mention that despite conducting extensive research, I have yet to uncover a solution or explanation for the error I am encountering. I must also emphasize that I am a complete novice when it comes to Angul ...

unusual occurrences with CSS and JavaScript when hovering over TEXTAREA or A elements

Lately, I've been facing an unusual issue in my web application (php) that was fine just a month ago. Upon hovering over a specific < TEXTAREA > or two buttons (add, exit) within a DIV, the background color of the DIV fills up, rendering the IN ...

The Replay Subject will not activate the async pipe when utilizing the subscribe shorthand during initialization

I'm curious about the behavior of a replay subject created using the subscribe shorthand method, specifically why it does not trigger the async pipeline when the next method is called. When I follow this approach, everything functions as expected: ex ...

Font discrepancies in HTML field types "text" and "textarea" are causing inconsistent font display

Why do the text in my "text" and "textarea" fields show different fonts on my pages' HTML? I attempted to specify the font type in both the background CSS file and within the HTML, but it did not resolve the issue. Just to be transparent...I'm ...

Saving any type of file in SQL Server with a field type of varbinary(max) can be achieved by utilizing Angular with ASP.NET Core to create a REST API

I am currently facing an issue while attempting to save a file, such as an image, in the Microsoft SQL Server Management Studio through asp .NET core for the Rest API. I have managed to create a base64 representation of the file, but I am unsure about the ...

Issue detected - .xml2js.DELETE/package,json file corrupted within the node_modules of an Angular application

Issues arose following the update to Angular-Cli V10.1.0. The main difficulties I faced: The ng command was malfunctioning. It became apparent that essential dependencies were missing: npm WARN @angular/<a href="/cdn-cgi/l/email-prote ...

Conceal the rating of WordPress products when they have no ratings

I am looking to remove the star ratings under the title for products with empty reviews. I specifically want to hide the stars without allowing users to leave a new review. I found a similar solution for hiding a different element and attempted to customiz ...

Align these buttons in a vertical position

I'm trying to place a Twitter button and a LinkedIn profile button next to each other, using the recommended embed code from each service. However, they are not aligning vertically as I would like. I want both buttons to be centered vertically within ...

"Discrepancy in Alignment of Bootstrap's Dual Column Layout

Currently, I am in the process of designing a straightforward two-column layout. This layout will consist of one prominent image at the top followed by two columns underneath - one for images and the other for text. https://i.sstatic.net/sYphQ.png Howeve ...

How can I center a button instead of using "margin-left: 0" when its location changes on a smaller screen?

Website: When viewing the website on my desktop, the text over the top image - "Buckinghamshire Food Partnership believe that everyone is entitled to a Right to Food" and the button - "Get involved" are aligned to the left with a 10% margin. However, on a ...

What is the best way to keep the footer at the bottom and make it fixed in Material UI?

import * as React from "react"; import Container from "@mui/material/Container"; import Image from "next/image"; import Link from "@/src/Link"; import Box from "@mui/material/Box"; import Typography from &q ...

Enhancing the selection of options in Angular 2 using object values

When I retrieve a list of object values from an API, each object contains a property to identify the selected item. I am successfully binding the items list to the view. Here is the JSON data: https://i.sstatic.net/itmfh.png Below is my code snippet: & ...

Toggle the visibility of three different div elements using JavaScript on mouseover

Trying to create three image links that display different divs when onMouseOver. <script type="text/javascript> function toggleVisibility(divid) { if (divid==="1"){ document.getElementById("1b").style.visibility = "visible"; document.getElem ...

Adjusting the value of a variable in an Scss selector will result in a change, regardless of the presence of an element matching the selector

CSS File $dark-mode: false!default; $primary-dark: blue; [dark-mode='dark'] { background: gray!important; $dark-mode: true!global; } [dark-mode='light'] { background: yellow!important; $dark-mode: false!global; } @if $dark-m ...

Calculate the position of an element's top property using dynamic JavaScript calculations

I am currently working on a script to control the scrolling speed of elements on a webpage relative to their parent div. The code I have written so far is as follows: $('#two').css({'top' : 600-($(this).scrollTop() / 1.2)+"px"}); The ...

What makes CSS Overflow: hidden toggle from working initially to suddenly not working?

There seems to be an issue with the code below - it works fine initially, but as soon as I tweak the height values for .Image, it stops functioning as expected. The test image starts overflowing instead of staying hidden, and no matter how many times I a ...

Creating classes dynamically in Angular2 and Ionic2

Dealing with a dilemma here. I am attempting to dynamically create an instance of a class from its superclass. Essentially, I have an AbstractClass and multiple classes that inherit from it. Check out this functional example in the TypeScript playground : ...

The Angular application continues to display the outdated component HTML template in the browser even after it has been updated

In my role, I am currently focusing on developing Angular libraries that can be reused across various projects within our software department. One of these libraries includes a login form that I have successfully published to npm and integrated into anothe ...

Encountering a ModuleBuildError while setting up Tailwind CSS in Laravel 8

I am currently learning Laravel version 8 and encountered an issue while trying to install Tailwind CSS using the npm command. npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 Here is a detai ...