I am developing an application in Ionic2.There is a picture in the background of the rows.I also place a picture in the row.Images look fine on the browser(ionic serve).However, only background images are displayed on a real mobile device.What would be the reason.
home.html
<ion-grid>
<ion-row class="menurow">
<ion-col class="img2">
<img src="../assets/images/noun_683380_cc.png">
<h4 class="text text-center">OUR SERVICIES</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img3">
<img src="../assets/images/news.png">
<h4 class="text text-center">REFERENCES</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img4">
<img src="../assets/images/photo.png">
<h4 class="text text-center">PHOTOS</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img5">
<img src="../assets/images/video.png">
<h4 class="text text-center">VIDEOS</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img6">
<img src="../assets/images/contact.png">
<h4 class="text text-center">CONTACT</h4>
</ion-col>
</ion-row>
</ion-grid>
home.scss
.img2{
background-size: contain;
text-align: center;
background-image: url("../assets/images/photo-1471341971476-
ae15ff5dd4ea.png"),
}
.img2 img{
position: relative;
top:8px;
width: 14%;
}
.img3{
background-size: contain;
text-align: center;
background-image: url("../assets/images/ross-sokolovski-115060.png") ;
}
.img3 img{
position: relative;
top:8px;
width: 14%;
}
.img4{
background-size: contain;
text-align: center;
background-image: url("../assets/images/aron-visser-212265.png") ;
}
.img4 img{
position: relative;
top:8px;
width: 14%;
}
.img5{
background-size: contain;
text-align: center;
background-image: url("../assets/images/jakob-owens-96968.png") ;
}
.img5 img{
position: relative;
top:8px;
width: 14%;
}
.img6{
background-size: contain;
text-align: center;
background-image: url("../assets/images/d-ng-tr-n-qu-c-104959.png") ;
}
.img6 img{
position: relative;
top:8px;
width: 14%;
}
.menurow{
padding: 5px;
}
In your html, you have the incorrect relative path.
Each asset in html is retrieved from the path: './assets/'
So your file will look like:
<ion-grid>
<ion-row class="menurow">
<ion-col class="img2">
<img src="./assets/images/noun_683380_cc.png">
<h4 class="text text-center">OUR SERVICIES</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img3">
<img src="./assets/images/news.png">
<h4 class="text text-center">REFERENCES</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img4">
<img src="./assets/images/photo.png">
<h4 class="text text-center">PHOTOS</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img5">
<img src="./assets/images/video.png">
<h4 class="text text-center">VIDEOS</h4>
</ion-col>
</ion-row>
<ion-row class="menurow">
<ion-col class="img6">
<img src="./assets/images/contact.png">
<h4 class="text text-center">CONTACT</h4>
</ion-col>
</ion-row>
</ion-grid>
Related
I am migrating my Ionic 3 project to Ionic 4 and stumbled upon a problem with a page-specific background image which worked perfectly in Ionic 3 but not in Ionic 4.
The page has a image which should cover the full page, the page however has a ion-header and ion-footer component as well.
In my Ionic 3 the html looked as following:
<ion-header [ngClass]="'no-shadow'">
<ion-navbar transparent>
<ion-buttons start>
<button ion-button icon-only menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<ion-row class="logo-row" *ngIf="isKeyboardHidden">
<ion-col col-8 offset-2 padding text-center>
<img id="logo" src="assets/img/logo-dia-positive.png">
</ion-col>
</ion-row>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col>
<p style="height: 16px"></p>
</ion-col>
</ion-row>
<ion-list no-lines class="form-inputs">
<ion-item>
<ion-label icon-only>
<ion-icon name="person"></ion-icon>
</ion-label>
<ion-input
type="text"
name="username"
[(ngModel)]="account.username"
[placeholder]="'USERNAME' | translate"
required></ion-input>
</ion-item>
<ion-item>
<ion-label icon-only>
<ion-icon name="unlock"></ion-icon>
</ion-label>
<ion-input
type="password"
name="password"
[(ngModel)]="account.password"
[placeholder]="'PASSWORD' | translate"
required></ion-input>
</ion-item>
</ion-list>
<ion-row>
<ion-col col-10 offset-1>
<button
ion-button
block
[disabled]="!f.valid || isLoading">
{{'LOGIN' | translate}}
</button>
</ion-col>
</ion-row>
</form>
</ion-content>
<ion-footer *ngIf="isKeyboardHidden">
<ion-row>
<ion-col text-center>
<p class="light-gray">
<span class="bold">
<a class="default-text"
Some Footer Text
</a>
</span>
</p>
</ion-col>
</ion-row>
</ion-footer>
With the scss:
page-login {
.content {
background: url('../assets/img/background.png') no-repeat;
background-size: cover;
#logo {
padding-top: 5rem;
}
form {
position: absolute;
bottom: 0;
width: 100%;
.logo-row {
margin-bottom: 40%;
}
.form-inputs {
.label-ios {
width: 60px;
max-width: 60px;
}
}
}
}
}
The result:
In Ionic 4 the header and footer behave differently, for some reason I have to make the ion-tool bar transparent in the scss, and move both the ion-header and ion-footer within the ion-content to make the image overlap both, the scss:
ion-toolbar {
--background: transparent;
//--ion-toolbar-text-color: white;
//--ion-color-base: transparent !important;
}
ion-content {
--background: url('../../../assets/img/background.png') no-repeat center/cover fixed;
--background-size: cover;
#logo {
padding-top: 5rem;
}
form {
--position: absolute;
--bottom: 0;
--width: 100%;
// rest of scss..
}
}
The html:
<ion-content>
<ion-header no-border [ngClass]="'no-shadow'">
<ion-toolbar slot="fixed">
<ion-buttons slot="start">
<ion-menu-toggle>
<ion-button>
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-row class="logo-row" *ngIf="isKeyboardHidden">
<ion-col size="8" offset="2" class="ion-padding ion-text-center">
<img id="logo" src="assets/img/logo-dia-positive.png">
</ion-col>
</ion-row>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<ion-row>
<ion-col>
<p style="height: 16px"></p>
</ion-col>
</ion-row>
<ion-list no-lines class="form-inputs">
<ion-item>
<ion-label>
<ion-icon slot="icon-only" name="person"></ion-icon>
</ion-label>
<ion-input
type="text"
name="username"
[(ngModel)]="account.username"
[placeholder]="'USERNAME' | translate"
required></ion-input>
</ion-item>
<ion-item>
<ion-label>
<ion-icon slot="icon-only" name="unlock"></ion-icon>
</ion-label>
<ion-input
type="password"
name="password"
[(ngModel)]="account.password"
[placeholder]="'PASSWORD' | translate"
required></ion-input>
</ion-item>
</ion-list>
<ion-row>
<ion-col size="10" offset="1">
<ion-button
block
[disabled]="!f.valid || isLoading">
{{'LOGIN' | translate}}
</ion-button>
</ion-col>
</ion-row>
</form>
<ion-footer transparent *ngIf="isKeyboardHidden">
<ion-row>
<ion-col class="ion-text-center">
<p class="light-gray">
{{'DEVELOPED_BY' | translate}}
<span class="bold">
Some Text
</span>
</p>
</ion-col>
</ion-row>
</ion-footer>
</ion-content>
This does not seem to make sense to me, there must be a way to move the ion-header and ion-footer outside of the ion-content in the html, with keeping the image overlapping both?
If I move both back out, the result looks as following, and thus wrong:
UPDATE
The proposed answer by #Sergey Rudenko works to some extend, the background image is displayed correctly but the disadvantage is that the position: absolute on the footer does not pushes the form element above the footer, instead the form element is positioned above / over the footer:
Sorry if I am not fully understanding your context, but can't you do something like this:
Template:
<ion-header style="position: absolute; left: 0; top: 0; right: 0" no-border>
<ion-toolbar>
<ion-title>
Ionic 4 template
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
</ion-content>
<ion-footer style="position: absolute; left: 0; bottom: 0; right: 0" no-border>
<ion-toolbar>
<ion-button expand="block">Hit Me</ion-button>
</ion-toolbar>
</ion-footer>
SCSS:
ion-toolbar {
--background: transparent;
--ion-color-base: transparent !important;
}
ion-content {
--background: url('https://via.placeholder.com/150') no-repeat center/cover fixed;
--background-size: cover;
}
ion-header, ion-footer {
border: 0px !important;
border-bottom-color: transparent !important;
background-image: none !important;
border-bottom: none !important;
}
Depending on your use case maybe not using "absolute" but "fixed" position etc?
I'm developing an Ionic 4 application, and I want to center the login in the exact middle of the page, but couldn't.
I have tried scroll content changes, grid manipulation, ion-content flexbox, etc.
The only thing that actually works is the 'text-center', which only aligns it horizontally...
How can I center all the content?
HTML
<ion-content class="border-input">
<ion-grid>
<ion-row justify-content-center>
<ion-col align-self-center size-md="6" size-lg="5" size-xs="12">
<div text-center>
<h4>Acesse o aplicativo utilizando suas credenciais</h4>
</div>
<form (ngSubmit)="entrar()" [formGroup]="formLogin">
<div>
<ion-item class="margin-025" lines="none">
<ion-list>
<label item-content for="email">
E-Mail
</label>
<ion-grid>
<ion-row>
<ion-input class="border-input" text-wrap type="text" formControlName="email" autofocus></ion-input>
<div class="margin-left-0.5" text-center align-self-center ngxErrors="email">
<div [ngxError]="['required']" [when]="['touched']">
<ion-icon text-center class="error-icon" size="large" name="close"></ion-icon>
</div>
</div>
</ion-row>
</ion-grid>
<div ngxErrors="email">
<div [ngxError]="['required']" [when]="['touched']">
<p class="alert-validation">
O E-Mail está incorreto!
</p>
</div>
</div>
</ion-list>
</ion-item>
<ion-item class="margin-025" lines="none">
<ion-list>
<label item-content for="senha">
Senha
</label>
<ion-grid>
<ion-row>
<ion-input class="border-input" text-wrap type="password" formControlName="senha"></ion-input>
<div class="margin-left-0.5" text-center align-self-center ngxErrors="senha">
<div [ngxError]="['required']" [when]="['touched']">
<ion-icon text-center class="error-icon" size="large" name="close"></ion-icon>
</div>
</div>
</ion-row>
</ion-grid>
<div ngxErrors="senha">
<div [ngxError]="['required']" [when]="['touched']">
<p class="alert-validation">
A Senha está incorreta!
</p>
</div>
</div>
</ion-list>
</ion-item>
</div>
<div>
<ion-button expand="block" color="secondary" size="25%" type="submit" [disabled]="!formLogin.valid">Entrar</ion-button>
</div>
</form>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
CSS
.select {
min-width: 90%;
max-width: 90%;
width: 90%;
}
.border-input {
border: solid 1px black;
border-radius: 5px;
}
.margin-1 {
margin: 1%;
}
.margin-025 {
margin: 0.25%;
}
.alert-validation {
color: red;
}
.error-icon {
color: red;
}
ion-input {
--padding-start: 12px !important;
}
ion-content {
display:flex;
justify-content:center;
align-items:center;
align-content:center;
}
You could use flexbox to align the div.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm very new to Ionic and I have a simple question that I couldn't find in the documentation.
Is there any way to use Ionic classes to simply align the "Disc 20%" text on the center of the images?
Something like this image:
The code I currently have is:
<ion-content class="card-background-page">
<ion-card *ngFor="let periode of items" (click)="dismiss(periode)">
<ion-list>
<div class="item item-input-inset">
<button ion-item class="item item-input-wrapper" value="{{periode.Productid}}">
<ion-avatar item-start>
<img src="assets/imgs/home/bgCashback.png" style="border-radius:0%;width:72px;height:72px;">
</ion-avatar>
<div class="card-img">Disc 20%</div>
<div class="card-title" style="color:#838383;font-size:13px;font-weight:400">
{{ periode.title_promo }}
</div>
<div text-wrap class="card-subtitle" style="color:#9c9c9c;margin-left: 0px;margin-right: 0px;margin-top: 0px;margin-bottom: 0px;font-size: 12px;">
{{ periode.description }}
</div>
</button>
</div>
</ion-list>
<ion-row>
<ion-col></ion-col>
<ion-col>
<ion-note>Valid Until: {{ periode.end_date | date: 'dd MMM yyyy' }}</ion-note>
</ion-col>
</ion-row>
</ion-card>
and the scss :
card-background-page {
.ion-card {
position: relative;
text-align: center;
}
.card-img {
position: absolute;
top: 36%;
font-size: 2.0em;
width: 100%;
font-weight: bold;
color: #fff;
}
}
You can try with below ionic and CSS. Don't use inline CSS.
ionic code:
<ion-content class="card-background-page">
<ion-card *ngFor="let periode of items" (click)="dismiss(periode)">
<ion-list>
<div class="item item-input-inset">
<button ion-item class="item item-input-wrapper" value="{{periode.Productid}}">
<ion-avatar style="background: url("assets/imgs/home/bgCashback.png"); item-start>
<div class="card-img">Disc 20%</div>
</ion-avatar>
<div class="card-desc-cvr">
<div class="card-title">
{{ periode.title_promo }}
</div>
<div text-wrap class="card-subtitle">
{{ periode.description }}
</div>
</div>
</button>
</div>
</ion-list>
<ion-row>
<ion-col></ion-col>
<ion-col>
<ion-note>Valid Until: {{ periode.end_date | date: 'dd MMM yyyy' }}</ion-note>
</ion-col>
</ion-row>
</ion-card>
</ion-content>
CSS:
.card-background-page {
.ion-card {
position: relative;
text-align: center;
}
ion-avatar{
float: left;
text-align: center;
vertical-align: middle;
width: 72px;
height: 72px;
line-height: 72px;
background-size: 72px 72px;
}
.card-desc-cvr{
float: left;
}
.card-subtitle{
color:#9c9c9c;
margin: 0px;
font-size: 12px;
}
.card-title{
color:#838383;
font-size:13px;
font-weight:400
}
}
I need to create ion-card as shown below. I have tried many ways. But no luck yet. Any clue?
Note: It has 2 images. top one and small book cover.
Here is the sample of stackblitz
This is what I need:
.html
<ion-card class="card-margin">
<img class="contentPicture" [src]="data?.image" />
<ion-card-content>
<ion-item class="book-cover">
<ion-thumbnail item-left class="thumbnail">
<img [src]="data?.image2">
</ion-thumbnail>
</ion-item>
<ion-item class="book-details">
<h2>From book:
<span>My book</span>
</h2>
<h2>Publisher:
<span>My publisher</span>
</h2>
</ion-item>
</ion-card-content>
</ion-card>
My attempt can be found here.
Set styles in .book-cover class:
.book-cover{
top: -50px;
z-index: 2;
background: transparent;
}
Note: You may have to edit the image's alpha to remove the whitespace in the image itself if you have any.
For the name section, I suggest using ion-row and ion-col instead of ion-item as the latter takes up the entire row.
<ion-card-content>
<ion-grid>
<ion-row>
<ion-col col-2 class="book-cover">
<ion-thumbnail item-left class="thumbnail">
<img [src]="data?.image2">
</ion-thumbnail>
</ion-col>
<ion-col class="book-details">
<h2>From book:
<span>My book</span>
</h2>
<h2>Publisher:
<span>My publisher</span>
</h2>
</ion-col>
</ion-row>
<ion-grid>
</ion-card-content>
Use position: relative to the main image and position: absolute to the book image here I did sample code
.bg-image {
position: relative;
}
.book {
position: absolute;
top: 250px;
}
.text {
position: absolute;
left: 180px;
}
<div class="bg-image">
<img src="https://i.imgur.com/U4Oadyu.png">
</div>
<div class="book">
<img src="https://i.imgur.com/r7uK5St.jpg">
</div>
<div class="text">
<p>Text Here</p>
</div>
I'm creating a chat and my problem is that the div that has the messages inside it I put a scroll, but I can not keep it under everything.
This is the view code and styles:
<ion-grid>
<ion-row>
<ion-col col-12>
<button ion-button block color="success" style="text-transform: none" (click)="seeMembers()">See members</button>
</ion-col>
<ion-col col-12 class="div_chat" #div_theme>
<ion-list insert>
<button ion-item>
<p>test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</button>
</ion-list>
<h3 *ngIf="themeDB == false" text-center><strong>There are no new Topics</strong></h3>
</ion-col>
</ion-row>
</ion-grid>
This is my stylesheet
page-see-theme{
.div_chat{
width: 100%;
height: 300px;
overflow-y: auto;
}
}
Any idea is very useful, thanks for your help