For questions about the
Questions tagged [mat-card]
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.
…

Aayush Jain
- 53
- 5
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

Baktha
- 13
- 6
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 -
…

Narendra Pandey
- 514
- 4
- 11
- 26
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