Align left and right in mat-card-title
You can also do it with fewer lines and adjust it better to the content by using a container and flex properties:
<mat-card class="card-container">
<mat-card-title > Test message </mat-card-title>
<mat-card-title> Test message </mat-card-title>
</mat-card>
and this CSS:
.card-container {
/* not needed styles to reflect it */
background: blue;
padding: 10px;
color: white;
width: 500px;
/* needed styles below */
display: flex;
justify-content: space-between;
}
You can check a working sample here: https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/
This would ensure, that if you adjust the width to the container you need, the style adjusts nicely to fit without breaking and keeps your HTML clear and easy to read.
Align the text of material card title to right
you can do something like this:
<mat-card>
<mat-card-header>
<mat-card-title class="title-card-left">Test left</mat-card-title>
<mat-card-title class="title-card-right">Test right</mat-card-title>
</mat-card-header>
<mat-card-content></mat-card-content>
</mat-card>
Then define some styles for these classes in your css/scss:
.title-card-right{
display: inline;
float: right;
}
.title-card-left{
display: inline;
}
and then inside your styles.css
.mat-card-header-text{
width: 100% !important;
}
Material card action buttons extend left & right beyond card content boundary
The answer to your question:
why the green padding extends beyond the orange margin. If the green
padding == orange margin the buttons should align correctly without a
work-around
is in CSS file for this component. On the image is default config for mat-card-action
Regarding mat-card-title not aligning center
Text align not having effect because mat-header tag only having the width of its content. You can try like this
<mat-card >
<div style="text-align:center;">
<mat-card-title>spreadsheet</mat-card-title>
</div>
<mat-card-content>
<div id="spreadsheet">
</div>
Angular: How to display mat cards from left to right only
Give the parent div overflow, flex to row and specify child width.
<div style="width: 100%; display:flex; flex-direction: row; overflow: auto;">
<div style="min-width: 300px">
<mat-card class="example-card"></mat-card>
</div>
<div style="min-width: 300px">
<mat-card class="example-card"></mat-card>
</div>
<div style="min-width: 300px">
<mat-card class="example-card"></mat-card>
</div>
<div style="min-width: 300px">
<mat-card class="example-card"></mat-card>
</div>
...
</div>
Here is a working example: https://stackblitz.com/edit/angular-ngmra3?file=src%2Fapp%2Fcard-fancy-example.html
angular - how to align content to the center of the card
Simply use this case
mat-card {text-align: center}
And if you want to set heading in left then use this also.
mat-card-title { text-align: left }
Angular Material Design card: how to fix alignment?
You have to adjust the margin-left
to margin-left: auto
to make it work. margin-left: auto
will try to put the element itself to the far most right corner of its container.
Alignment and auto margins
By setting amargin
ofauto
on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with Flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space.
Read more about box alignment in Flexbox on MDN.
Your CSS will look like this:
* {
border: 1px solid black;
}
.survey-card {
border: 1px solid steelblue;
border-radius: 10px;
}
.mat-icon {
margin-left: auto;
}
.mat-slider-horizontal {
min-width: 100%;
}
and then it results in this StackBlitz example. See also this GIF of the result.
Align mat-cards content (image, text and buttons)
Since I answered your previous SO question, I'll build my answer to this question upon my previous answer. Please refer to this updated Stackblitz with images of different width and height.
EDIT: Adjusted the answer/stackblitz to make a row containing 5 elements.
Explanation
In order to keep the image always the same height I've added the class "image" to the <img>
-tag (you can of course apply the css to the img
-tag directly with .product img{...}
as well).
<img class="image" mat-card-image src="{{product.picture.url}}" alt="photo">
and applied the following CSS:
.image{
height: 150px; /* adjust as needed */
object-fit: contain;
}
With object-fit: contain
your image will always properly scaled and fully visible within the available area.
Keep in mind that object-fit
is currently only fully supported by the following browsers.
EDIT:
In order to get 5 Elements within each row you have to adjust the fxLayoutGap
and the calculation of the width for each element using the fxFlex
attribute. Please change your code as follows..
<div class="container" fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px">
<!-- Add addProduct-button outside loop -->
<mat-card fxFlex="0 1 calc(20% - 20px)" (click)="addProduct()" class="product">
...
</mat-card>
<!-- loop over the products -->
<mat-card fxFlex="0 1 calc(20% - 20px)" *ngFor="let product of products; let i = index" class="product">
...
</mat-card>
</div>
.. and change the 20px set on the fxLayoutGap
and the within the calculation of fxFlex
to your desired value.
With those values now set you have to apply a min-width value, otherwise all elements will just get smaller in width and the row won't wrap:
.product{
min-width: 180px; /* adjust as desired */
min-height: 250px;
margin-bottom: 20px; /* same as fxLayoutGap for even distribution */
}
EDIT 2
To make the first element the same height as the others you have to adjust to (min-)height
of the .product CSS-class to be equal to the height of the highest product.
EDIT 3 (to answer edit 2 of the question)
Since you didn't mark your question answered yet, I've modified the code you provided in your edit #2 to accomplish your desired design: stackblitz
I've changed the following:
- changed the
fxLayoutAlign
on the container to"space-evenly stretch"
instead offxLayoutAlign="start start"
this distributes all items in a row on the x-axis evenly and makes them stretch as high as the highest element of the row. - removed all
fxFlexFill
- added
fxFlex
to the mat-card-content - removed the height from the .product CSS-class
Regarding the border on the left side.. I assume your container is too close to the browser windows left side. I've change the container css in my stackblitz as well.
Related Topics
How to Disable Auto-Play for Local Video in Iframe
Angular (Typescript): How to Set Option of Selected to 'Selected' If Two-Way Binded
How to Force Position Absolute With 100% Width to Fit into Parent Div With Padding
Img Src Tag Not Displaying Image
Where Is the Extra Space Coming from Around This Textarea
Best Way to Create Video from Html5 Animation
When Div With Absolute Position Is Added Cannot Click on Links
Why Is Percentage Height Not Working on My Div
Css Overflow-X: Visible; and Overflow-Y: Hidden; Causing Scrollbar Issue
How Can the Parent Div Auto Resize Its Height Based on the Child'S Height
Css - How to Make the Checkbox and Label in One Line
How to Open Excel File in Browser, Not in Excel Application
Angular 4 Img Src Is Not Found
Navbar(Menu) Is Getting Overlapped by Body Element
How to View HTML File in Remote Unix Server
Angular 8 Material Dialog Close Button With X Top Right
Angular: *Ngif Tag on Input Element Causes It to Be Undefined. Cannot Read Value from Input Field