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
<mat-card style="text-align: center;">
<mat-card-header >
<mat-card-title style="text-align: center;">
spreadsheet
</mat-card-title>
</mat-card-header>
<mat-card-content>
<div id="spreadsheet"></div>
</mat-card-content>
</mat-card>
And this is the screenshot of the browser:
html file:
<mat-card class="title_center">
<mat-card-title>spreadsheet</mat-card-title>
</mat-card>
css file:
.title_center {
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
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>
Related
I am trying to make these vertical cards into horizontal cards.
I am using the Cards component from Angular Material.
I can create cards only vertically, but I need the cards arranged on a horizontal level.
Here I'm attaching my code for reference.
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
Create a container for all the mat-cards, then change the flow of the elements inside the container using CSS. For example:
<div style="display: flex;">
<mat-card>...</mat-card>
<mat-card>...</mat-card>
</div>
<div fxLayout="row wrap" fxLayoutGap="16px grid">
<div fxFlex="25%" fxFlex.xs="100%" fxFlex.sm="33%">
<mat-card class="mat-elevation-z4" >
</mat-card>
</div>
See link below for reference https://zoaibkhan.com/blog/create-a-responsive-card-grid-in-angular-using-flex-layout-part-1/
You need a container for mat-cards first, then you can set flex to make it horizontal or even vertical if you want. Some code is below maybe will help you.
.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>
I am working on an Angular application and as part of it I am trying to create a page with cards being populated vertically and not horizontally. Once 5-6 cards are populated in first column we start filling the second column. My code:
presentations = [1,2,3,4,5,6,7,8]
<div class="row card-data">
<div class="col-4" *ngFor="let presentation of presentations">
<mat-card>
card 1
</mat-card>
</div>
</div>
.card-data {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
But this is filling the cards as rows and not columns. What can I try to resolve this?
You probably don't want to mix layout columns and your cards here. Just apply flexbox to the cards and their container.
.card-data {
max-height: 300px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
mat-card {
padding: 10px;
margin: 10px;
background: pink;
}
<div class="row">
<div class="col-4 card-data">
<mat-card>
card 1
</mat-card>
<mat-card>
card 2
</mat-card>
<mat-card>
card 3
</mat-card>
<mat-card>
card 4
</mat-card>
<mat-card>
card 5
</mat-card>
<mat-card>
card 6
</mat-card>
<mat-card>
card 7
</mat-card>
</div>
</div>
I have created a div which shows an icon and text but I need to get the icon next to the text instead of above it. Currently looks like this:
And I need the icon to be next to the text like this (the icon needs to be displayed to the left of the text without moving the text so the header still aligns with the phone number):
Code:
<div fxLayout="row" fxLayoutAlign="space-around center">
<div>
<mat-icon svgIcon="phone-outline"> </mat-icon>
<h3>Customer Support</h3>
<label>123456</label>
</div>
<div>
<mat-icon svgIcon="email-outline"> </mat-icon>
<h3>Email</h3>
<label>test#email.com</label>
</div>
<div>
<mat-icon svgIcon="map-marker-outline"> </mat-icon>
<h3>Address</h3>
<label>address line 1</label>
</div>
</div>
I have three divs and using fxLayoutAlign aligns them next to each other accoss the page but if I put the icon into a seperate div the fxLayoutAlign moves it too far across the page. Is there a better way to align the divs?
Tried so far:
Tried putting the icon on the same line as the text but that puts the icon too close to the text:
<h3><mat-icon svgIcon="phone-outline"> </mat-icon> Customer Support</h3>
I need to have space between the icon and text and align it with the text.
Using CSS to try align still causes the icon to be too close to the text (and not aligned correctly):
.align-items { display: flex; justify-content: space-between; } .align-content { display: flex; align-items: center; }
Moving the icon in CSS using margins looks like its working but it has now moved the second line with the phone number:
The phone number should be directly under the header text (like in first screenshot above)
Here is another approach with pure css.
css
.align-items {
display: flex;
justify-content: space-between;
}
.align-content {
display: flex;
}
mat-icon {
margin-right: 10px;
}
.align-text-item {
display: flex;
flex-direction: column;
align-items: center;
}
h3 {
margin-top: 0px;
}
html
<div class="align-items ">
<div class="align-text-item">
<div class="align-content">
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
<div>
<h3>Customer Support</h3>
123456
</div>
</div>
</div>
<div class="align-text-item">
<div class="align-content">
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
<div>
<h3>Email</h3>
123456
</div>
</div>
</div>
<div class="align-text-item">
<div class="align-content">
<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>
<div>
<h3>Address</h3>
123456
</div>
</div>
</div>
</div>
Create a class for the divs wrapping the icon and heading. No fxLayout is needed
.align-icon{
display: flex;
align-items: flex-end;
}
You can use the matPrefix and matSuffix
<mat-form-field class="example-full-width">
<mat-icon matPrefix>mode_edit</mat-icon>
<mat-label>EXAMPLE</mat-label>
<mat-icon matSuffix>mode_edit</mat-icon>
</mat-form-field>
<div fxLayout="row" fxLayoutAlign="space-around center">
<div>
<h3>Customer Support<mat-icon svgIcon="phone-outline"> </mat-icon></h3>
</div>
<div>
<mat-icon svgIcon="email-outline"> </mat-icon>
<h3>Email</h3>
</div>enter code here
<div>
<mat-icon svgIcon="map-marker-outline"> </mat-icon>
<h3>Address</h3>
</div>
</div>
Problem: my generated columns doesn't center align my mat-icon.
What am I missing?
On ngFor my datatable columns are generated dynamically, but no one's align correctly.
Inside my DIV there's a mat-icon that's (by default) apply for left alignment.
HTML Code:
<div *ngFor="let col of colunas">
<ngx-datatable-column [name]="col.ds_titulo_coluna" *ngIf="col.fl_exibe_coluna">
<ng-template let-row="row" ngx-datatable-cell-template>
<div *ngIf="row[col.id] === 'pend'">
<div class="v-align-middle">
<mat-icon class="warning">info</mat-icon>
</div>
</div>
<div *ngIf="row[col.id] === 'rep'">
<div class="v-align-middle">
<mat-icon class="red-fg">report_off</mat-icon>
</div>
</div>
<div *ngIf="row[col.id] === 'ok'">
<div class="v-align-middle">
<mat-icon class="green-fg">check_circle</mat-icon>
</div>
</div>
<div *ngIf="row[col.id] === 'ag'">
<div class="v-align-middle">
<mat-icon class="orange-fg">schedule</mat-icon>
</div>
</div>
</ng-template>
</ngx-datatable-column>
</div>
SCSS Code:
.ngx-datatable-column.text-center
{
display: flex !important;
align-items: center !important;
margin-left: 10px;
}
.warning{
color: #dec71b;
}
.v-align-middle {
vertical-align: middle;
}
Result of code:
Replace .v-align-middle CSS rules as per below. Hope this will be worked for you.
.v-align-middle {
display: flex;
justify-content: center;
align-items: center;
}
i have code html using angular material library:
<div layout="row" layout-wrap style="background: yellow; ">
<div ng-repeat="pro in Products" >
<md-card class="cardProduct" >
<img ng-src={{pro.Image1}} class="md-card-image imageProduct">
</md-card>
</div>
</div>
it shows: enter image description here
I want it align center, and the fourth image is in the left, not center.
Thank you so much.
Since you are using angular material you can easily do this with flex-box
It will help if there are more images to come
Change your html code as
HTML:
<div layout="row" layout-wrap style="background: yellow; ">
<div class="prod-container" ng-repeat="pro in Products" >
<md-card class="cardProduct" flex="30" >
<img ng-src={{pro.Image1}} class="md-card-image imageProduct">
</md-card>
</div>
</div>
CSS:
.prod-container{
display: flex;
flex-wrap: wrap;
justify-contents: flex-start;
}
you can also give css for the cards by removing flex=30 from the html code
<md-card class="cardProduct">
and the CSS will be
.cardProduct{
min-width: 30%;
flex: 1;
}
Make the parent container (layout="row") have the css property:
text-align: center;
And the ng-repeated containers have the property:
display: inline-block;
and in case you have any text for those containers might want a:
text-align: left;
just make the text-align property of the parent of the images to center.
text-align:center;