Creating horizontal cards with Angular MaterialWould you like to learn how to design

I need help converting these vertical cards into horizontal cards.

Currently, I am utilizing the Angular Material Cards component.

While I can successfully create cards in a vertical layout, my goal is to arrange them horizontally.

Below is the code snippet that I am working with:

HTML:

<body>
    <div class="wrap">
        <!-- <img class="img-bg" background-image src="assets/logo.png"> -->
        <div class="text">
            <h1 style="font-weight: bold; text-align: center;">Welcome to Data Portal...</h1>
            <br>

            <mat-card class="example-card">
                <mat-card-header>
                  <mat-card-title>Catalog</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                  <p>Here you can find the details about users/roles.</p>
                </mat-card-content>
                <mat-card-header>
                    <mat-card-title>Data Portal</mat-card-title>
                  </mat-card-header>
                  <mat-card-content>
                    <p>Here you can find the details about all the databases and tables.</p>
                </mat-card-content>
            </mat-card>
            <br>
            <mat-card class="example-card">
                <mat-card-header>
                  <mat-card-title>Data Portal</mat-card-title>
                </mat-card-header>
                <mat-card-content>
                  <p>Here you can find the details about all the databases and tables.</p>
                </mat-card-content>
            </mat-card>

        </div>
    </div>
</body>

CSS: 

.example-card {
    height: 200px;
    width: 400px;
    max-width: 300px;
    margin-left: 100px;
    background-color: lightgrey;
    color: black;
    text-align: center;
  }

sample image

htmlcssangularangular-material

Answer №1

Organize all the mat-cards in a container and adjust the layout of the elements within the container using CSS styling. Here's an example:

<div style="display: flex;">
  <mat-card>...</mat-card>
  <mat-card>...</mat-card>
</div>

Answer №2

<div fxLayout="column nowrap" fxLayoutGap="20px grid">
  <div fxFlex="30%" fxFlex.xs="90%" fxFlex.md="40%">
    <mat-card class="mat-elevation-z6" >

    </mat-card>
</div>

For more details, check out this link

Answer №3

To create a container for mat-cards, you first need to set up the flex properties to make them align horizontally or vertically depending on your preference. Refer to the code snippet below for guidance.

.wrap{
display: flex;
margin: 0 auto //center the content
}

.example-card{
border: 1px solid black;
border-radius: 5px;
text-align: center;
height: 200px;
width: 400px;
max-width: 300px;
margin-left: 100px;
background-color: lightgrey;
color: black;
text-align: center;
}
<div class="wrap">
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title>Catalog</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>Here you can find the details about users/roles.</p>
    </mat-card-content>
    <mat-card-header>
      <mat-card-title>Data Portal</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>Here you can find the details about all the databases and tables.</p>
    </mat-card-content>
  </mat-card>
  <br>
  <mat-card class="example-card">
    <mat-card-header>
      <mat-card-title>Data Portal</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>Here you can find the details about all the databases and tables.</p>
    </mat-card-content>
  </mat-card>
</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

The module '@angular/core' could not be located in the '@angular/platform-browser' and '@angular/platform-browser-dynamic' directories

Attempting to incorporate Angular 2.0.0 with JSMP, SystemJS, and TS Loader in an ASP.NET MVC 5 (non-core) application. Encountering errors in Visual Studio related to locating angular modules. Severity Code Description Project File Line Suppr ...

angulartypescriptvisual-studio-2015systemjsjspm

I am facing an issue with my ngx-translator in Ionic4 as it is unable to retrieve the current language

I am having an issue with the ngx-translator package where I am unable to set the default language in my application. Here is the code snippet from my app.module.ts: import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; import ...

angularionic-frameworkionic4

Fetching an item from Local Storage in Angular 8

In my local storage, I have some data stored in a unique format. When I try to retrieve the data using localStorage.getItem('id');, it returns undefined. The issue lies in the way the data is stored within localStorage - it's structured as a ...

javascriptangulartypescriptlocal-storageangular8

Click the link to copy it and then paste the hyperlink

I am facing an issue with copying and pasting file names as hyperlinks. I have checkboxes next to multiple files and a share button. When I check the boxes and click on the share button, I want to copy the download URLs for those files. Although I can succ ...

javascripthtmlangulartypescript

What exactly does Isomorphic rendering entail when it comes to ReactJS?

Javascript frameworks pose a challenge for Search Engine optimization as they create dynamic content that is not easily indexed. React addresses this issue with Isomorphic rendering. But what exactly does this concept entail and how does it differ from Ang ...

angularreactjsjavascript-framework

Title menu that can be both dragged and edited

I am currently working on developing an HTML user interface that enables my users to rearrange or organize the menu items or utilities according to their preference, much like the HOME screens on Android or iOS devices. I am seeking advice on how I can s ...

jqueryhtmlcss

Tips on converting a date string in the format 'dd/MM/yyyy' to a date type using TypeScript

I have attempted the following code in order to convert the date from 'yyyy-mm-dd' format to 'dd/MM/yyyy'. However, when I check the typeof() of the result, it shows that it is a string. Is there a method to convert it into only a date? ...

angulartypescriptkendo-ui-angular2

Implementing Reddit API with Single Page Application using Implicit Grant flow strategy

Whenever I try to redirect to https://www.reddit.com/api/v1/authorize?response_type=token&client_id=3JTVJFUn28MxFQ&state=RANDOMSTATEFORCONFIRMATION&redirect_uri=http%3A%2F%2Flocalhost%3A4200&scope=read from my Angular application, I encou ...

angularoauth-2.0single-page-applicationreddit

The issue of the JQuery div failing to center itself persists even after refreshing the page

I have implemented a script to centrally align the main content div within the viewing area. It works perfectly on page load or resize, but upon page refresh, the content div shifts to the left side of the page. You can see the issue here when pressing re ...

jqueryhtml

I am having trouble grasping the concept of CSS and the first-child selector

I am having an issue with the first-child selector in CSS. I have two divs with the same class, each containing an image and a paragraph element. When I use the .div-class:first-child {margin:10} rule, the margin is only applied to the paragraph in the fir ...

htmlcss

Having trouble retrieving documents from a nested collection in Firebase

I am attempting to retrieve all documents from Firebase that are based on a query. Here is my current firebase structure: https://i.stack.imgur.com/tXrX8.png Even though I have two documents inside the "ListaFavorite" collection, when I check using empty ...

angulartypescriptfirebasegoogle-cloud-firestore

Tips for organizing a dashboard design with Bootstrap

I am looking to design a dashboard using the Bootstrap grid system. Here is the layout I have in mind: https://i.sstatic.net/cqWP5.jpg What would be the optimal way to structure this in the HTML file? Would a layout of 5 rows and 2 columns work best? Th ...

htmlbootstrap-5

JavaScript code that uses jQuery does not function properly on an HTML form

Hello everyone, I am having trouble with some JavaScript code. Here is what I have: $(document).ready(function(){ $(".replyLink").click(function(){ $("#form-to-"+this.id).html(htmlForm()).toggle(500); return false; }); function htmlForm(){ var htm ...

javascriptjqueryhtml

Utilizing Sessions Across Several PHP Forms

Hey there! I've got a query for you. When you kick off your PHP code with session_start(), do you need to keep adding the prior variables on subsequent form pages? I'm contemplating using the session() function for my GYM Sign UP Webpage. The f ...

phphtmlforms

The current code lacks any form of line breaks

While attempting to edit a CSS file in Sublime Text 2, I noticed that all the code is displayed without any line breaks. This makes it difficult to read and work with. Is there a way to fix this issue and format the code into readable sections? ...

csscode-cleanup

Combine the information from 3 separate subscriptions into a single object using RxJS in Angular 9

I am seeking assistance with merging data from 3 different sensors into one object. I am using Cordova plugins to retrieve accelerometer, gyroscope, and magnetometer data. However, I am facing an issue in subscribing to all three observables simultaneously ...

javascriptangularcordova

Choosing a sibling element before another using CSS

Is there a way to make both of my icons display some text when hovered over? I managed to make it work, but the leftmost icon doesn't trigger the span element when hovered. The text needs to appear on the left side of the Yelp icon for design reasons. ...

htmlcss

Content is not being contained within a div container

I'm facing a unique issue that I've never encountered before - text is not wrapping inside a div element. Here's a snippet of my HTML code: http://jsfiddle.net/NDND2/2/ <div id="calendar_container"> <div id="events_container"& ...

cssword-wraphtmltext

The Angular Interceptor encounters difficulties in accurately determining the timing of API responses when multiple requests are made simultaneously

Steps to replicate the issue: The initial API call responds in 600ms. While the first API call is being processed, another 4 API requests are sent to the interceptor, which adds an additional second to the process. The problem arises when the interceptor ...

angularangular6angular5angular7angular8

Is there a way to create a dropdown selection for font families with vue js?

Here is a select element with font families that I want to apply to my texts: <select v-model="focused_font"> <option value="" disabled selected>Font</option> <option v-for="font in available_fonts" ...

javascriptcssvue.jsvuejs2vue-component