I want to display the profile image in my project. but the image is not displayed and it shows alt word.
<div class="row">
<div class="col-md-4 col-6">
<mat-card class="example-card">
<img mat-card-image src="..\assets\images\signupbg.jpg" alt="Avatar" class="avatar">
<mat-card-header>
<div style="text-align:center;">
<mat-card-title>Samanthika Rajapaksa</mat-card-title>
<mat-card-subtitle>University of Moratuwa</mat-card-subtitle>
</div>
</mat-card-header>
<mat-card-content>
<mat-chip-list aria-label="Languages">
<mat-chip color="primary" selected>Networking</mat-chip>
<mat-chip color="primary" selected>Angular</mat-chip>
<mat-chip color="primary" selected>Aws</mat-chip>
<mat-chip color="primary" selected>Spring Boot</mat-chip>
<mat-chip color="primary" selected>My SQL</mat-chip>
</mat-chip-list>
</mat-card-content>
</mat-card>
</div>
</div>
</div>
I think the issue is with the path written way. Try as given below.
<img mat-card-image src="assets/images/signupbg.jpg" alt="Avatar" class="avatar">
Assumed as your assets folder is inside the src folder.
Related
I have a input file to select some files, as soon as I select them a preview modal is open containig the array, the user must delete one of the files if wanted but everytime I click do delete it, the modal just closes (the item is deleted btw).
Here's the template:
<div id="showFiles" class="modal fade" ref="modal" aria-labelledby="staticBackdropLabel">
<div class="modal-dialog modal-dialog-scrollable modal-lg">
<div class="modal-content">
<div class="modal-header p-3 bg-soft-primary">
<h5 class="modal-title">Arquivos</h5>
</div>
<div class="modal-body">
<div v-for="file in files" :key="file.name" class="preview-card border rounded">
<div class="d-flex align-items-center p-2">
<b-img v-if="file.type != 'application/pdf'" class="img-thumbnail me-2" alt="200x200" width="200"
:src="generateURL(file)" data-holder-rendered="true" />
<iframe v-else class="img-thumbnail me-2" data-holder-rendered="true" frameBorder="0" scrolling="no" alt="200x200" width="200" :src="generateURL(file)" />
<div class="flex-grow-1">
<div class="pt-1">
<h5 class="fs-11 mb-1" data-dz-name="">
{{ file.name }}
</h5>
<p class="fs-9 text-muted mb-0" data-dz-size="">
<strong>{{ (file.size / 1024) / 1000 }}</strong> MB
</p>
<strong class="error text-danger" data-dz-errormessage="" />
</div>
</div>
<div class="flex-shrink-0 ms-3">
<b-button-group>
<b-button class="btn btn-sm btn-danger" #click="remove(files.indexOf(file))">
Excluir
</b-button>
</b-button-group>
</div>
</div>
</div>
</div>
<div class="modal-footer hstack gap-2 justify-content-end">
<button type="submit" class="btn btn-success btn-label chat-send waves-effect waves-light"
#click="formSubmit">
<i class="ri-send-plane-2-fill align-bottom label-icon" />Enviar
</button>
</div>
</div>
</div>
</div>
And here is the script of the delete option:
remove(i) {
this.files.splice(i, 1)
},
I've tried preventDefault(), #click.prevent and modal.show() right after the splice but none of it worked.
I've Angular v13 application with #angular/flex-layout also v13. The issue is Flex layout of type row wrap with Grid alignment is not working as expected. Below is the html code block. The application is hosted in stackblitz. If I remove the grid from fxLayoutGap, the layout is getting rendered without gutter space for second/subsequent rows.
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</ng-container>
</div>
</div>
How to configure #angular/flex-layout row wrap with grid?
EDIT
Here is the solution, updated code can be accessed at stackblitz. Basically we need to wrap a div around mat-card and add fxFlex with percentage. In my case I had set it to 25 so that 4 cards come in first raw.
<div class="cards-container" style="width: 100%; syntax: 100%;">
<div
fxLayout="row wrap"
fxLayoutAlign="start start"
fxLayoutGap="32px 12px grid"
>
<ng-container *ngFor="let item of cards">
<div fxFlex="25">
<mat-card>
<mat-card-header>
<mat-card-title>{{ item }}</mat-card-title>
<mat-card-subtitle>subtitle</mat-card-subtitle>
</mat-card-header>
<img
mat-card-image
height="240px"
width="240px"
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
alt="Photo of a Shiba Inu"
/>
<mat-card-content> </mat-card-content>
<mat-divider inset></mat-divider>
<mat-card-actions>
<button mat-button>Ok</button>
</mat-card-actions>
<mat-card-footer>
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
</mat-card-footer>
</mat-card>
</div>
</ng-container>
</div>
</div>
I'm working on a QuizSelectionComponent using Ionic. I need to adjust the ion-card's height to fit all the content in the card, longer than the height of my laptop screen. I've tried adding height: 100% !important;, height: auto !important; and height: 100vh !important; in my CSS file; but none seem to increase the height of the card. Is there a setting I can override somewhere?
My QuizSelectionComponent template looks like:
<ng-container *ngIf="quizData.length > 0">
<ion-card style="height: 100vh">
<ion-card-header>
<div class="container">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 logo">
<div ion-card-avatar class="header-image"></div>
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
<ion-card-title i18n>
<h1>Quiz App</h1>
</ion-card-title>
<ion-card-subtitle i18n>
<span>How well do you know Angular? Find out!</span>
</ion-card-subtitle>
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 info">
<ion-icon name="information-circle-outline"></ion-icon>
</div>
</div>
</ion-card-header>
<section class="ion-card-content">
<mat-toolbar>
<mat-menu-button mat-button [matMenuTriggerFor]="menu">
<span i18n>Milestones ▼</span>
</mat-menu-button>
<mat-menu #menu="matMenu">
<div *ngFor="let quiz of quizData">
<button mat-menu-item
[routerLink]="['/intro/', quiz.quizId]"
data-i18n="quiz.milestone">{{ quiz.milestone }}</button>
</div>
</mat-menu>
</mat-toolbar>
<mat-grid-list cols="3" rowHeight="370px">
<mat-grid-tile
(click)="onClick()"
*ngFor="let quiz of quizData"
[routerLink]="['/intro/', quiz.quizId]"
[ngClass]="{ 'completed': status === 'completed' }"
[ngStyle]="{ 'background': 'url(' + quiz?.imageUrl + ') no-repeat center 10px',
'background-size': '300px 210px' }">
<summary class="quiz-info">...</summary>
<div class="status-icon">...</div>
</mat-grid-tile>
</mat-grid-list>
</section>
<ion-footer>
<h3 class="text-center" i18n>© 2020</h3>
</ion-footer>
</ion-card>
</ng-container>
Have you tried with: height: 100vh;
vh: Relative to 1% of the height of the viewport
https://www.w3schools.com/cssref/css_units.asp
We are currently using Angular as a front-end with fx-layout api for responsiveness.
When we are using the fxLayout="column" all elements are collapsed and doesn't seem to have any height.
What are the best practice when using fx-layout/flex to handle these scenarios ?
Using angular 9.0.0rc with flex-layout": "^8.0.0-beta.27
Browserslist setting
0.5%
last 2 versions
Firefox ESR
not dead
# IE 9-11
Here an image from IOS Safari (12)
Here an image from chrome
Here the repeated container which display the list seen in the image above
<div *ngIf="!(dataSource.loading$ | async)">
<mat-card class="pointer mb-2" *ngFor="let quotation of dataSource.quotations$ | async"
(click)="onClickRow(quotation)">
<mat-card-content fxLayout="row" fxLayoutGap.gt-xs="15px" fxLayout.xs="column" fxLayoutAlign="start center"
fxLayoutAlign.xs="center center">
<div fxLayout="column" fxLayoutAlign="center center">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && quotation.customer.photoUrl"
[src]="quotation.customer.photoUrl" alt="">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasCustomerRights && quotation.salesRep.photoUrl"
[src]="quotation.salesRep.photoUrl" alt="">
<img class="profile-picture" *ngIf="authSvc.currentUser.hasSalesRights && !quotation.customer.photoUrl"
src="https://storage.googleapis.com/edcommerce/businesslogic/images/placeholder/avatar.jpg" alt="">
</div>
<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
<div fxLayout="row" *ngIf="authSvc.currentUser.hasSalesRights">
<span class="mat-body">{{quotation.createdDate | edDate}}</span>
</div>
<div fxLayout="row" fxLayoutAlign.xs="center center">
<span class="mat-h2 m-0">{{quotUtils.getVehicleDescription(quotation)}}</span>
</div>
<div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasSalesRights"
fxLayoutAlign="start center">
<span class="mat-body">{{ts('common.user.text.roles.customer')}}</span>
<span class="mat-body">{{quotation.customer.fullName}}</span>
</div>
<div fxLayout="row" fxLayoutGap="10px" *ngIf="authSvc.currentUser.hasBuyerRights"
fxLayoutAlign="start center">
<span class="mat-body">{{ts('common.user.text.roles.sales_rep')}}</span>
<span class="mat-body">{{quotation.salesRep.fullName}}</span>
</div>
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="10px" fxLayoutAlign="start center">
<span class="mat-body">{{ts('page.quotations.text.step_required')}}</span>
<span
class="mat-body-2 color-primary">{{enumUtils.Quotation.getStatusDescByRole(quotation.status,statusTypes)}}</span>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
The problem with safari occur on this element (second container in the mat-card-content):
<div fxLayout="column" fxFlex fxLayoutAlign.xs="center center">
The flex on safari resulted with a weird exponential number in the CSS something like this : flex: 1 1 1.12e-16
Changing fxFlex for fxFlex="grow" generated on safari this css flex : 1 1 100% which fix the height !
I tried adding a ion-refresher to my app, but when i pull to refresh, the ion-footer goes transparent.
Code:
<ion-content padding color="primary">
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
<ion-refresher-content color="primary" pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
<div *ngFor="let weather of weather_data">
.......
</ion-content>
<ion-footer>
<ion-toolbar color="white">
<div class="tabs">
<div class="tab">
<ion-icon name="keypad"></ion-icon>
<div class="label">Input</div>
</div>
<div class="tab">
<ion-icon name="person"></ion-icon>
<div class="label">Account</div>
</div>
<div class="tab">
<ion-icon name="log-out"></ion-icon>
<div class="label">Log Out</div>
</div>
</div>
</ion-toolbar>
</ion-footer>
Fixed it, i just removed the color attribute in the footer. Thanks anyway