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
Related
app.component.ts
<router-outlet></router-outlet>
nav-landing.component.html
I have a component that contains my mat-toolbar and my mat-sidenav-container. The menu to toggle to side nav is only shown on smaller devices.
<mat-toolbar ngClass="transparent-nav">
<div>
<mat-radio-group aria-label="Select a country">
<mat-radio-button value="All" [checked]="true" aria-label="All countries">All
</mat-radio-button>
<mat-radio-button value="C" aria-label="Country" [disabled]="true">North America
<mat-menu #cornwallOptions="matMenu">
<button mat-menu-item *ngFor="let n of northCountries" (click)="selectNorthAmerica(n)">
{{ n.country }}
</button>
</mat-menu>
</mat-radio-button>
</mat-radio-group>
<button mat-icon-button ngClass="btn-toggle">
<mat-icon (click)="sidenav.toggle()">
menu
</mat-icon>
</button>
</div>
</mat-toolbar>
<mat-sidenav-container>
<mat-sidenav #sidenav position="end">
<mat-accordion>
<mat-expansion-panel [disabled]="true" hideToggle (click)="selectAllCountries()">
<mat-expansion-panel-header>
All
</mat-expansion-panel-header>
</mat-expansion-panel>
<mat-expansion-panel [disabled]="true">
<mat-expansion-panel-header class="disabledExpansionPanel">
North Countries
</mat-expansion-panel-header>
<mat-nav-list>
<mat-list-item *ngFor="let n of northCountries" (click)="selectNorthAmerica(n)"> {{ n.country }}
</mat-list-item>
</mat-nav-list>
</mat-expansion-panel>
</mat-accordion>
</mat-sidenav>
<mat-sidenav-content>
<div ngClass="content">
<router-outlet></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
landing.component.html
I then call my nav bar inside my landing page.
<header>
<app-nav-landing></app-nav-landing>
</header>
<main ngClass="landing-main-bg">
<div ngClass="container">
<div ngClass="row justify-content-center align-items-center ">
<div ngClass="col-md-5">
<div ngClass="section-center">
<div ngClass="main-heading">
<app-search-box></app-search-box>
</div>
</div>
<div>
</div>
</div>
<div>
</div>
</div>
</div>
</main>
<app-footer></app-footer>
While testing I realized that the sidebar did not show when I clicked the menu. I later found out that it was being hidden so I added this CSS below and then the sidemenu started to show.
.mat-sidenav-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
}
However, I now realize that because of the position absolute the I am now longer able to type in the search box component because the mat-sidenav-container is now covering it. Once I remove the positional absolute I can search but I need position absolute to show the nav bar.
How do I stop the mat-sidenav-container from covering the other components?
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 have a primeng VirtualScroller and it has a property scrollHeight that fixes some height. I've tried to set 100% at value but it doesn't accept. Also tried to add style or class to component to set height 100% but does not work aswell. How can I make the height have same height of the browser window?
<p-virtualScroller [value]="lazyCars" scrollHeight="40em" [itemSize]="150" [rows]="50" [cache]="false"
[lazy]="true" (onLazyLoad)="loadCarsLazy($event)" [totalRecords]="totalLazyCarsLength">
<ng-template let-car pTemplate="item" let-i="index">
<div class="ui-g car-item mt-1">
<div class="ui-g-12 ui-md-2">
<div class="ui-g-12 ui-md-12" style="font-size: 11px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'dd/MM/yyyy' }}</div>
<div class="ui-g-12 ui-md-12" style="font-size: 24px; text-align: center; padding-top: 18px">{{ generateDate() | date: 'HH:mm:ss' }}</div>
</div>
<div class="ui-g-12 ui-md-2" style="display: flex">
<img class="rounded-image" src="../../assets/images/profileplaceholder.jpg" width="115" height="100" />
<!--<i style="font-size: 5rem; align-self: center;" class="pi pi-users mx-auto"></i>-->
</div>
<div class="arrow-left"></div>
<div class="ui-g-12 ui-md-5 chat-window">
<div class="ui-g">
<div class="ui-g-10 ui-sm-6">Autor: {{car?.autor}}</div>
<h2 class="ui-g-10 ui-sm-6 ml-2">Evento: {{car?.evento}}</h2>
</div>
</div>
</div>
</ng-template>
<ng-template let-car pTemplate="loadingItem">
<div class="ui-g car-item empty-car-item">
<div class="ui-g-12 ui-md-2">
<div class="empty-car-item-index"></div>
</div>
<div class="ui-g-12 ui-md-2">
<div class="empty-car-item-image"></div>
</div>
<div class="ui-g-12 ui-md-8">
<div class="ui-g">
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
<div class="ui-g-12"><div class="empty-car-item-text"></div></div>
</div>
</div>
</div>
</ng-template>
</p-virtualScroller>
This can be done using nested flexboxes. I've explained how those work with Angular in a different question. Applying that solution to this problem involves applying the equivalent of the flexbox-middle class to each element that composes the virtual scrolling area:
p-virtualScroller,
/deep/ .ui-virtualscroller,
/deep/ .ui-virtualscroller-content,
/deep/ .ui-virtualscroller-list,
/deep/ cdk-virtual-scroll-viewport {
display : flex;
flex : 1;
flex-direction : column;
}
With that styling, the scrollHeight attribute of the p-virtualScroller element should no longer be set as the component will flex to the height of the parent element:
<p-virtualScroller [itemSize]="50" [value]="items">
<ng-template pTemplate="item" let-obj>
{{ obj.name }}
</ng-template>
</p-virtualScroller>
The full code and a demo of the working result is available here.
How could I make an vertical align of '10:00" and the gliphs on right side of thewe markup, into parent div?
An optional horizontal align as well will be appreciated.
https://jsfiddle.net/DTcHh/39516/
//markup
<div class="container" style="outline: 1px solid orange;">
<div class="col-sm-10 bg-danger">
<div class="col-sm-2 col-md-2 col-lg-2 bg-info">
10:00
</div>
<div class="col-sm-10 col-md-10 col-lg-10">
<div class="row">
<div class="col-sm-12">
Clique aqui para agendar
</div>
<div class="col-sm-12">
Consulta
</div>
<div class="col-sm-12">
Parando
</div>
</div>
</div>
</div>
<div class="col-sm-2 " >
<div><i class="pull-right glyphicon" class="glyphicon-chevron-down"></i>
<i class="fa fa-lg fa-lock pull-right"></i>
<i class="fa fa-lg fa-user pull-right"></i>
</div>
</div>
//css
import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
body {
margin: 10px;
}
Add this to your styles:
.container,
.container > .col-sm-10 {
display: flex;
align-items: center;
}
Updated Fiddle
The spacing between the headers on my tabs when using ionic-slide-box-tabs .
It works fine in the browser, but the spacing is off on my android device.
The markup looks like the following
<ion-slide-box style="position:absolute; bottom: 0;left: 0;right: 0; " slide-tabs-scrollable="true" on-slide-changed="slideHasChanged($index)" class="has-header" show-pager="false" ion-slide-tabs>
<ion-slide ion-slide-tab-label="{{category.name}}" ng-repeat="category in model.selectedMenu.categories" on-slide-changed="slideHasChanged($index)">
<ion-content style="margin-top:44px;margin-bottom:44px;" overflow-scroll="false" scroll="true">
<ion-item class="row col item-list" style="padding:0px;margin:0px;" ng-repeat="item in category.items | orderBy: 'name' track by item.id">
<img ng-src="{{item.imagePath}}" class="col" style="height:{{height}}px;padding:0px;"></img>
<div class="gradient-image" style="height:{{height/2 + height/6}}px;position:absolute;width:100%;bottom:0px;margin-bottom:45px;">
<div style="position:absolute;top:0px;width:100%;margin-top:{{height/8}}px">
<div>
<p class="item-title">{{item.name | uppercase}}</p><br>
</div>
<div class="item-text-wrap">
<p class="item-description">{{item.description}}</p><br>
</div>
</div>
</div>
<div class="row item action-panel padding" style="margin:0px;">
<div class="col action">
<div class="info" style="text-align:center;font-size:20px;">{{::item.price | currency}}</div>
</div>
<div class="col action">
<button ng-click="count = removeItem(item)" class="col button icon action" ng-class="{ 'minus-button': item.quantity > 0}" ng-disabled="item.quantity == 0">
<i class="icon ion-minus action action-icon" ng-if="item.quantity > 0"></i>
<i class="icon ion-minus action action-icon" style="color:#fff;" ng-if="item.quantity == 0"></i>
</button>
</div>
<div class="col action">
<div class="info" ng-class="{'light':item.quantity == 0}" style="text-align:center;font-size:24px;" ng-model="item.quantity"><b>{{item.quantity}}</b></div>
</div>
<div class="col col-30">
<button ng-click="count = addItem(item)" class="col button icon primary-action">
<i class="icon ion-plus primary-action-icon"></i>
</button>
</div>
</div>
</ion-item>
</ion-content>
</ion-slide>
</ion-slide-box>