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
1
vote
0 answers

angular 7 mat-card in only row using flex layout

I work with angular 7 and I use mat-card and flex layout. I want to place side by side in only row and the three cards will be centered in the page ( meaning the position of the three card will be in the center ) like this : I use this code…
franco
  • 1,829
  • 6
  • 42
  • 75
1
vote
3 answers

Placing Content in mat card

I am new to frontend development and learning and practising CSS. I am using a mat card as shown in attached image My code is as follows
Rocky
  • 23
  • 3
1
vote
1 answer

Can't display different Mat-cards Horizontally correctly using *ngFor in a single row in Angular

I have to display 3 cards in a single row, horizontally using *ngFor but it is getting displayed vertically. Here is the code for my mat-card.
1
vote
2 answers

Regarding mat-card-title not aligning center

I've use mat-card, in that I've used mat-card-title, for that I've used style="text-align:center"; but it's not aligning center
Aashiq
  • 447
  • 1
  • 12
  • 27
1
vote
1 answer

How to add css to the mat-card background when mat-checkbox is checked which is inside the mat-card-content?

I need to change the mat-card background color when the mat-checkbox is checked which is inside the mat-card-content
1
vote
1 answer

Align carousel button to the left and right side of the div container

As I in the above picture I have used two buttons left and right button to scroll the images. I want to align the left and right button as shown in below image. Here is the stackblitz link. Thanks in advance!
PGH
  • 2,164
  • 9
  • 34
  • 62
1
vote
2 answers

Align the text of material card title to right

I try to align my title of matcard to right but the css doesn't work .. why ? BLABLA
al NTM
  • 247
  • 5
  • 15
1
vote
2 answers

Indeterminate progress bar not working properly

I am using MatProgressBarModule to add a linear indeterminate status bar at end of card-footer. Below is my code -
0
votes
0 answers

Angular mat cards with left and right arrow slider

I want only three of my mat cards to appear on the screen and there should be a left arrow and right arrow. When we click on right arrow the cards should move and we should be able to see the next cards till the end, same with the left arrow for…
Saran S
  • 39
  • 1
  • 6
0
votes
0 answers

mat-label not aligning with the outline border in mat-form-field

enter image description here enter image description here if you see the card the label is overlapping with the border. outline is on right side coming i want the default behaviour of mat-form-field but its not working after removing formgroup from…
0
votes
1 answer

Behavior change with mat-card v16.0.1

I have an Angular Material Card. The header is vertical on the left side and the content is on the right side. Since I updated my Angular version and the Angular Material library to 16, the header and content are displayed on top of each…
sQeeZ212
  • 1
  • 2
0
votes
1 answer

Is it possible to use mat-card instead of mat-table?

Is it possible to use mat-card instead of mat-table. Here is an example which is of course not working. But this is just an example in which direction I would like to go and display the data.
k.vincent
  • 3,743
  • 8
  • 37
  • 74
0
votes
0 answers

How to transform a angular table row to a table of mat-card

So I have a table in my angular project, basic table, with pagination etc...There is a small code snippet of the table :
Alif Dev
  • 15
  • 5
0
votes
0 answers

Virtual scroll in Multiple NG2-Chart in Mat-cards , Display Loader until the data is attached

So I have around 100 Mat-Cards on screen , each one containing one NG2 doughnut chart. This initially gave me performance issue as it took more than a minute to load. So I used cdk-virtual-scroll to load charts on the run. The performance is tough…
sharad jain
  • 113
  • 1
  • 10
0
votes
0 answers

How to align mat-cards

I want to align the unequal heighted mat-cards. I tried with flexlayout npm but still there is some space. Code
Rabeesh
  • 31
  • 9