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>
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 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>
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'm trying to center two div Horizontally, and align one at the Middle of the parent container, and the second one at the Bottom of the parent container. I'm using Foundation 6, with the Flexbox version.
Html
<section id="hero">
<div class="row align-middle align-center">
<h1>Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p>Some text</p>
</div>
</section>
Css
#hero {
height: 100vh;
display: flex;
flex-wrap: wrap;
}
The problem is that every div in the flex container (#hero) appear on the same line.
Thank's for helping !
Pretty sure you have to add the class column to the sub element of row like so:
id="hero">
<div class="row align-middle align-center">
<h1 class="column">Welcome</h1>
</div>
<div class="row align-bottom align-center">
<p class="column">Some text</p>
</div>
</section>
I finally found how to align vertically 3 divs using a Flexbox. Foundation wasn't really in the problem.
I made a Js Fiddle for those who have the same question:
.wrapper {
display: flex;
flex-direction: column;
height:90vh;
}
.center {
width: 100%;
flex-grow: 1;
align-items: center;
display:flex;
}
.a {
width: 100%;
}
<div class="wrapper">
<div class="a">Header</div>
<div class="center">Body</div>
<div class="a">Footer</div>
</div>
JSFiddle: https://jsfiddle.net/ek38ff5r/20/
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;