Stack Overflow
Stack Overflow

Questions tagged [mat-card]

For questions about the content container element for Angular Material. When using this tag also include the more generic [angular-material] and [angular] tags where possible.

55 questions
7
votes
3 answers

How to align left and right text mat-card-header in angular 4?

I need to align the text content in the header on left and right side of header tag. i tried different ideas, but none works for me. help me.
Sivabalakrishnan
  • 475
  • 1
  • 7
  • 23
3
votes
0 answers

Cannot split mat-card into two columns

I am trying to split a I have into two columns like so: An image on the left taking up maybe 25% of the card, and a header + 2 expansion panels on the right in a column. No matter what I try, there is always a single column so it looks…
pfinferno
  • 1,779
  • 3
  • 34
  • 62
3
votes
2 answers

Mat-card is not specifying gap below and above the row

I am trying to specify some gap between two rows while displaying mat cards. But it is not showing properly after using flex. This is the HTML file:-
NoobCoder
  • 493
  • 8
  • 25
3
votes
1 answer

Why can I only set mat-elevation settings at the component level css?

I am using Angular material in my Angular 8 project and am trying to set up the design of the shadow on my material cards. I am using the elevation helper mixins as described here: https://material.angular.io/guide/elevation Rather than customise…
thecloud_of_unknowing
  • 1,103
  • 14
  • 23
2
votes
1 answer

mat card doesn't go full height of parent, Angular Material

I have a mat-card structure , that on mat-dialog-content has the following styles: margin: 0; padding: 0; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; min-height: 328px; max-height: 328px; The issue I am…
Iulian
  • 31
  • 3
2
votes
1 answer

Forcing mat-expansion-panel to overflow container element

I have a mat-expansion-panel inside of a mat-card. The expansion panel contains a mat-chip-list which contains anywhere between 50-60 mat-chip elements. When I expand this panel, all of my mat-card objects are stretched downwards, and the chips show…
pfinferno
  • 1,779
  • 3
  • 34
  • 62
2
votes
2 answers

How to filter mat card in angular

I'm wondering how I can use the search bar(https://stackblitz.com/edit/stackoverflowcom-a-60857864-6433166-dpaump ) and the code below to be able to filter the cards using it name. This is my Explore TS file (I imported matcards and routers…
user9436741
2
votes
3 answers

Can we use Mat-card with Anchor Tag?

I want to make mat-card to be clickable and when I hover over the mat-card I wanted to show link cursor. There are many cards when I click on one of the cards I want to navigate to another page. How Can I achieve this? Is it appropriate to use the…
Clickmit Wg
  • 523
  • 2
  • 9
  • 25
2
votes
1 answer

Keep Image Size the same even after zooming in and out

I have a mat-sidenav component filled with mat-card components. Outside the sidenav, I have the rest of my page. What I would like is for my sidenav card components to keep the exact same size as someone is zooming in and out the page. I have…
TheGreatZab
  • 163
  • 1
  • 3
  • 18
2
votes
1 answer

How to use ngFor to make cards remain in a row in Angular 6?

ngFor generated card stacked on each other instead of remain in a row. I am generating cards through ngFor. I am using fxFlex="30" for each card but they stacked on each other. I used flex-wrap also but didn't work.
Utkarsh
  • 537
  • 9
  • 16
2
votes
0 answers

angular material mat-card not displaying latin alphabet characters correctly

I am using mat-card in angular material to display some letters of the latin alphabet such as ḍ, ḥ, ṣ, etc. These are all letters with a dot underneath. Inside a mat-card only, a space is being added after the letter, as in: aḍ ar (instead of…
omar
  • 401
  • 1
  • 7
  • 26
1
vote
1 answer

CSS to multiple mat-cards responsive

I have a project in Angular material in which I am creating a component with several mat-cards. What I am trying to do is make the screen responsive depending on the width of the cards. Right now only the card is made smaller but not the titles or…
segmet
  • 61
  • 1
  • 7
1
vote
1 answer

How set blurred background image for mat-card

I have mat-card with dynamic background image and i need blur this image My card Card Content my…
NiNjA_CaT
  • 68
  • 5
1
vote
0 answers

How can I make mat-card as mat-grid list view with 2 cards in each row

I am working with mat-card where I want to put mat-cards as 2x1 ie; 2 cards per row in mobile views and 3 cards per row in tab and laptop view. I followed this example with grid-list and this is what I want to achieve. I tried with mat-card with the…
Optimist Rohit
  • 428
  • 6
  • 24
1
2 3 4