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>
Related
I'm pretty new to the Angular framework and I'm making an app with a bunch of Angular components. Right now I'm trying to do a Search Page where I have an input for searching characters, and then after you've picked one of the lists it will show the character's stats card.
So what I want is to move both the search input and the card which appears after selecting a character in the middle of the screen, instead of having them both positioned at the left side of the screen.
Here is a picture that shows what I want to accomplish:
Here is my code right now (might be a bit messy but I just started like a month and a half ago learning JS, HTML, and CSS):
Search Component Template =>
<div fxLayot="column">
<div style="background: #4c4848" class="detailContainer">
<h1>Buscador de Personajes:</h1>
</div>
<br><br>
<div fxLayout="row">
<div fxLayot="column">
<form class="autocomplete-form">
<mat-form-field class="enable-full-width" style="background: #4c4848; border-radius: 5px; border: 4px solid black;">
<mat-label>Nombre</mat-label>
<input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="searchInput"
[matAutocomplete]="auto" (input)="search()">
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="selectedOption($event)" [displayWith]="checkValue">
<mat-option *ngFor="let character of suggestions" [value]="character">
{{character.name}}
</mat-option>
<mat-option *ngIf="characters.length === 0 && searchInput.value.trim().length>0" value="">
ERROR 404 - No se encontró nada con el término "{{searchInput.value}}".
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</div>
<span class="middler"></span>
<div *ngIf="selectedCharacter" fxLayout="column" style="width: 400px;">
<app-character-card [character]="selectedCharacter"></app-character-card>
</div>
(Don't know why they appear in distinct code blocks sorry for that)
Search Component CSS =>
.autocomplete-form {
min-width: 500px;
max-width: 500px;
width: 100%;
}
.enable-full-width {
width: 500px;
}
.detailContainer {
text-align: center;
justify-content: center;
align-items: center;
border: 5px solid black;
border-radius: 7px;
padding-top: 10px;
}
.centered {
text-align: center;
justify-content: center;
align-items: center;
}
Character Card Component Template =>
<mat-card>
<mat-card-header>
<div mat-card-avatar class="header-image"></div>
<mat-card-title class="charname">{{character.name}}</mat-card-title>
<mat-card-subtitle class="charage">{{character.age}}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image [src]="character | image">
<mat-card-content>
<mat-card-title>{{character.race}}</mat-card-title>
<mat-card-subtitle>{{character.class}}</mat-card-subtitle>
<hr>
<div fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
<div fxLayout="row" fxLayoutGap="30px">
<div fxFlex="50">
<strong>Fuerza: </strong>{{character.strength}}
</div>
<div fxFlex="50">
<strong>Inteligencia: </strong>{{character.intelligence}}
</div>
</div>
<div fxLayout="row" fxLayoutGap="30px">
<div fxFlex="50">
<strong>Destreza: </strong>{{character.dexterity}}
</div>
<div fxFlex="50">
<strong>Carisma: </strong>{{character.charisma}}
</div>
</div>
<div fxLayout="row" fxLayoutGap="30px">
<div fxFlex="50">
<strong>Constitución: </strong>{{character.constitution}}
</div>
<div fxFlex="50">
<strong>Sabiduría: </strong>{{character.wisdom}}
</div>
</div>
</div>
<hr>
</mat-card-content>
<mat-card-actions>
<button mat-button color="warn" [routerLink]="['..', character.characterId]">
Leer Más
</button>
<button mat-button color="info" [routerLink]="['../../editcharacter', character.characterId]">
Editar
</button>
<a mat-button color="info" [routerLink]="['../..', character.userId, character.characterId, 'inventory']">
Inventario
</a>
</mat-card-actions>
Character Card Component CSS =>
mat-card {
margin-top: 20px;
}
img {
height: 500px;
}
.charname, .charage {
margin-top: 5px;
}
.header-image {
background-image: url('././assets/d20.png');
background-size: cover;
}
I really just need them positioned in the center. I also have this problem in my ItemSearchComponent, but I suppose If I can't answer this, I could easily extrapolate to the other one. Thanks!
If you need any more code just ask.
To achieve that put the search and the results-of-the-search on the same DIV, in "row mode" one below the other, then center that DIV horizontally with many methods out there I usually go for display:flex
<div class="head">
buscador de personajes
</div>
<div class="searchContainer">
<div class="searchVertical">
<div class="border">your<br>SearchBox</div>
<div class="border">search<br>Resuts</div>
</div>
</div>
CSS
.searchContainer {
width: 100% ;
display: flex ;
justify-content: center;
}
.searchVertical {
display:flex ;
flex-direction: column;
}
.border {
border : 1px red solid ;
}
.head {
width: 100% ;
border: 1px green solid ;
}
This is how it looks
https://www.geeksforgeeks.org/how-to-center-a-div-using-flexbox-property-of-css/
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'm trying to create a page with a 20-60-20 flex fill layout but the div in the center which should make up 60% of the page is wider than its content so it makes its content look like it is off-center.
home.component.html:
<div fxLayout="row wrap" fxLayoutGap="20px grid">
<div *ngFor="let data of DUMMY_DATA">
<mat-card class="example-card" >
<img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
<mat-card-content class="description-max-height">
<p>
{{data.description.length > 100 ? data.description.substring(0, 100) + '...' : data.description}}
</p>
</mat-card-content>
<mat-card-actions>
<button mat-button>LIKE</button>
<button mat-button>SHARE</button>
</mat-card-actions>
</mat-card>
</div>
</div>
home.component.css:
.example-card {
width: 250px;
height: 300px;
}
.description-max-height {
max-height: 30px;
}
app.component.html:
<mat-toolbar color="primary" style="margin-bottom: 20px">
<mat-toolbar-row>
<span>Some title</span>
<span class="toolbar-spacer"></span>
<button mat-button color="accent" (click)="openLoginDialog()">Log In</button>
<button mat-button color="accent" (click)="openSignupDialog()">Register</button>
</mat-toolbar-row>
</mat-toolbar>
<div fxLayout="row">
<div fxFlex="20"></div>
<router-outlet fxFlex="60"></router-outlet>
<div fxFlex="20"></div>
</div>
app.compoenent.css:
.toolbar-spacer {
flex: 1 1 auto;
}
How can I implement this so that will display the home.component.html on the center of the page without it being wider than it's contet?
You can find a Stackblitz example here
The router-outlet isn't a container. All the content routed to a router-outlet is rendered as a sibling node, not as an outlet's child node. So you should wrap the router-outlet with a 60%-width div.
Stackblitz demo
<div fxLayout="row">
<div fxFlex="20"></div>
<div fxFlex="60">
<router-outlet></router-outlet>
</div>
<div fxFlex="20"></div>
</div>
Adding fxLayoutAlign="centre" to the fxLayout div(top level div) in home-component.html should align the items/cards in centre in the container.
<div fxLayout="row wrap" fxLayoutGap="20px grid" fxLayoutAlign="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
<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>
I am trying to display an image under button tag but it doesn't work. How can i display the image under button tag? Or what can i use instead of button tag? I want to make it clickable whole tag.
<ion-content padding="true" class="home">
<button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
<div class="list card" >
<h1 [innerHTML]="item.title.rendered" style="color:#000000;"></h1>
<div style="margin: 0px; line-height: 250px; background-color: rgb(232, 235, 239); text-align: center;">
<ion-img style="font-size: 64px; color: rgb(136, 136, 136); vertical-align: middle;" src="https://assets.wired.com/photos/w_600,h_338/wp-content/uploads/2016/09/Google_G_Logo-2-f-600x338.png"></ion-img>
</div>
<div class="item item-body" id="cameraTabDefaultPage-list-item-container3">
<div id="cameraTabDefaultPage-markdown6" class="show-list-numbers-and-dots">
<p [innerHTML]="item.excerpt.rendered" style="margin-top:0px;color:#000000;"></p>
</div>
</div>
</div>
</button>
</ion-content>