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
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?
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
I have a problem in ionic 4 application custom width in ion-menu is not working in iPhone 5/5s.
It's working fine in iPhone 6 and above.
I want custom width 100px for a menu.
app.component.html
<ion-app>
<ion-split-pane>
<ion-menu class="appMainmenu" type="overlay" [swipeGesture]="false">
<ion-content class="bg-profile">
<ion-list no-margin>
<ion-list-header color="dark" margin-bottom style="min-height: 2.9em;">
<ion-label>Menu</ion-label>
</ion-list-header>
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
<div [routerLink]="[p.url]" class="menuMargin" text-center (click)="openPage(p)"
[class.activeMenu]="checkActivePage(p)">
<h4 class="fs-35" no-padding>
<ion-icon slot="start" [name]="p.icon" color="dark"></ion-icon>
</h4>
<h5 class="fs-13" no-padding> {{p.title}} </h5>
</div>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<div class="menuMargin" text-center (click)="logout()" [class.activeMenu]="checkActivePage(p)">
<h4 class="fs-35" no-padding>
<ion-icon name="power" color="dark"></ion-icon>
</h4>
<h5 class="fs-13" no-padding> Logout </h5>
</div>
<div ctext-center>
<h4 class="versioncss" no-padding>V - 1.0.28</h4>
</div>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet [swipeGesture]="false" main></ion-router-outlet>
global.css
.appMainmenu{
--width: 100px;
width: 100px
}
Try to add ion-menu as a selector in css:
ion-menu.appMainmenu {
--width: 100px;
}
I am new to Ionic framework, I am trying to create an ion-list like in the picture, but I can't figure out how to use item-thumbnail-right and item-avatar in the one item with some stuff in the right corner and a pseudo footer like in the picture...
I tried this code:
<ion-list>
<a class="item item-thumbnail-right" ng-repeat="activeOffer in activeOffers"
ng-href="#/app/offers/{{activeOffer.offer.id}}">
<img ng-src="{{siteRoot}}/upload/assets/img/media-support/{{activeOffer.mediaSupport.fileName}}">
<div class="item item-avatar">
<img ng-src="{{siteRoot}}/upload/assets/img/localbusiness/{{activeOffer.localBusiness.logo}}">
<h2>{{activeOffer.localBusiness.label}}</h2>
<p>{{activeOffer.localBusiness.description}}</p>
</div>
<h2>{{activeOffer.offer.title}}</h2>
<p>{{activeOffer.offer.description}}</p>
</a>
</ion-list>
But, I'm getting something ugly
Try with following example:
<ion-item class="item-remove-animate item-avatar-right" ng-repeat="item in listingData.app" type="item-text-wrap" href="#/tab/restaurant_category/{{item.rest_id}}">
<img ng-src="{{item.logo}}">
<img src="" style="float:left;width: 15px;height: 15px;">
<h2>{{item.restaurant_name}}</h2>
<p ng-repeat="cuisne in item.available_cuisine.cuisine">{{cuisne.name}}</p>
<div class="row order-policy-time">
<div class="col col-50">
<p>delivers in 60 min</p>
</div>
<div class="col text-right">
<p>collection in 30 min</p>
</div>
</div>
<div class="welcome-custom-icon">
<span class="ti-angle-right"></span>
</div>
</ion-item>
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>