How can I align and trim my grid? The columns were not right, were not one below the other and choose the divisions.
<ion-card>
<ion-card-header>
<p style="margin-left: 5%"> last orders buy </p>
</ion-card-header>
<ion-card-content padding-right >
<ion-grid style="width: ; ">
<ion-row>
<ion-col col-1 style="font-size: 10px">
ID
</ion-col>
<ion-col col-3 style="font-size: 10px">
Operação
</ion-col>
<ion-col col-1 style="font-size: 9px; margin-top: 1px">
De
</ion-col>
<ion-col col-1 style="font-size: 10px ">
P/
</ion-col>
<ion-col col-2 style="font-size: 10px">
Volume
</ion-col>
<ion-col col-2 style="font-size: 10px">
Valor
</ion-col>
<ion-col col-2 style="font-size: 10px">
Status
</ion-col>
</ion-row>
<ion-row style="margin-left: -20px" *ngFor="let dado of dados" >
<ion-list>
<ion-item-sliding #item>
<ion-item>
<ion-col col-1 style="font-size:10px">
#{{dado.id}}
</ion-col>
<ion-col col-3 style="font-size:10px">
{{dado.operation}}
</ion-col>
<ion-col col-1 style="font-size:10px">
{{dado.from_currency}}
</ion-col>
<ion-col col-1 style="font-size:10px">
{{dado.to_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_in_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_brl}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.operation}}
</ion-col>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="share(item)">Cancelar</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
If you remove this sliding its looking very good
change in .html
<ion-content no-padding>
<ion-card no-padding>
<ion-card-header>
<p style="margin-left:-9px;"> last orders buy </p>
</ion-card-header>
<ion-card-content no-padding>
<ion-grid>
<ion-row>
<ion-col col col-1 style="font-size: 10px">
ID
</ion-col>
<ion-col col col-2 style="font-size: 10px">
Operação
</ion-col>
<ion-col style="font-size: 9px;">
De
</ion-col>
<ion-col style="font-size: 10px ">
P/
</ion-col>
<ion-col col col-2 style="font-size: 10px">
Volume
</ion-col>
<ion-col col col-2 style="font-size: 10px">
Valor
</ion-col>
<ion-col style="font-size: 10px">
Status
</ion-col>
</ion-row>
</ion-grid>
<ion-grid>
<ion-row *ngFor="let dado of dados">
<ion-col col col-1 style="font-size:10px;">
#{{dado.id}}
</ion-col>
<ion-col col col-2 style="font-size:10px">
{{dado.operation}}
</ion-col>
<ion-col style="font-size:10px">
{{dado.from_currency}}
</ion-col>
<ion-col style="font-size:10px">
{{dado.to_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_in_currency}}
</ion-col>
<ion-col col-2 style="font-size:10px">
{{dado.value_brl}}
</ion-col>
<ion-col style="font-size:10px">
{{dado.operation}}
</ion-col>
</ion-row>
</ion-grid>
</ion-card-content>
</ion-card>
</ion-content>
Result
Related
how to make the ion card float on the ion slider with mobile content, when i move the content it scrolls up with everything.
<ion-slide>
<ion-row >
<div>
<ion-card mode="md">
<ion-item class="select-paciente" lines="none">
<ion-button size="default" slot="star">
<ion-icon slot="icon-only" name="arrow-back-outline"></ion-icon>
</ion-button>
<h6 style="color: #073f15;">SERVICE</h6>
<ion-button size="default" slot="end">
<ion-icon slot="icon-only" name="arrow-forward-outline"></ion-icon>
</ion-button>
</ion-item>
</ion-card>
</div>
</ion-row>
<ion-row id="Services">
<ion-col size-lg="1" size-md="2" size-sm="3" size-xs="4">
<ion-card mode="md">
<img src="../../../assets/img.jpg" />
<p>Service1</p>
</ion-card>
</ion-col>
</ion-row> </ion-slide>
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 currently working a privacy page in html with Ionic 3 and my output should be like this :
Right now with my code, this is what I get:
This is my code:
<ion-list radio-group [(ngModel)]="flag1">
<ion-grid item-center style="border-style: none">
<ion-row item-center style="border-style: none">
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio color="dark" [value]="true"></ion-radio>
<ion-label class="radio-text">Si</ion-label>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio item-left color="dark" [value]="false"></ion-radio>
<ion-label item-center class="radio-text">No</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
and my css looks like this:
.radio-text {
font-size: 12px;
white-space: pre-line;
text-justify: auto;
display: inline-block;
}
And need as well to remove that annoying black bar, already tried with border 0 but didn't work, anyone got a solution for this?
To center add <ion-col col-2></ion-col> before radio buttons:
<ion-list radio-group [(ngModel)]="flag1">
<ion-grid item-center style="border-style: none">
<ion-row item-center style="border-style: none">
<ion-col col-2></ion-col>
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio item-left color="dark" [value]="true"></ion-radio>
<ion-label class="radio-text">Si</ion-label>
</ion-item>
</ion-col>
<ion-col col-4>
<ion-item style="border-style: none" item-center>
<ion-radio item-left color="dark" [value]="false"></ion-radio>
<ion-label class="radio-text">No</ion-label>
</ion-item>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
To style it square use:
.radio-text {
font-size: 12px;
white-space: pre-line;
text-justify: auto;
display: inline-block;
}
.radio-md .radio-icon, .radio-wp .radio-icon{
border-radius: unset !important;
}
.input-wrapper {
-webkit-flex: 0!important;
-ms-flex: 0!important;
flex: 0!important;
}
.item-md .radio-md[item-left], .item-md .radio-md[item-start] {
margin: 0!important;
}
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
This is what I currently have: https://gyazo.com/7b0c0d53beef6846545bece011332cd5 . You can see that I have a lot of pictures next to each other, but I want to have 2 halves in the ionic card. On the topleft the groupname , bottom left the teachers and on the right side the studens in the group. I want it like this: https://gyazo.com/d5e71aa9cfe6de9f121ce236f951a6d7 .
HTML
<ion-header>
<ion-navbar color ="primary">
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col *ngFor="let group of groupData">
<ion-card >
<ion-item>
<h2>{{ group.name }}</h2>
<div class="pic" *ngFor="let student of group.students">
<img [src]="student.avatar" />
</div>
<h3>{{group.students.length}} Leerlingen</h3>
<div class="pic" *ngFor="let teacher of group.teachers">
<img [src]="teacher.avatar" />
</div>
<h3>{{group.teachers.length}} leerkrachten</h3>
</ion-item>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
CSS
.pic{
display: inline-block;
height: 40px;
width: 40px;
}
Instead of using ion-item, you can use div tag and set specifically half width of the content like so
<ion-content>
<ion-grid>
<ion-row>
<ion-col *ngFor="let group of groupData">
<ion-card >
<div class="left-content">
<div class="pic" *ngFor="let teacher of group.teachers">
<img [src]="teacher.avatar" />
</div>
<h3>{{group.teachers.length}} leerkrachten</h3>
</div>
<div class="right-content">
<h2>{{ group.name }}</h2>
<div class="pic" *ngFor="let student of group.students">
<img [src]="student.avatar" />
</div>
<h3>{{group.students.length}} Leerlingen</h3>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Css
.left-content {
width: 50%;
float: 'left'
}
.right-content {
width: 50%,
float: 'right'
}
Use the grid system
<ion-card >
<ion-item>
<h2>{{ group.name }}</h2>
<ion-row>
<ion-col col-6>
<div class="pic" *ngFor="let student of group.students">
<img [src]="student.avatar" />
</div>
<h3>{{group.students.length}} Leerlingen</h3>
</ion-col>
<ion-col col-6>
<div class="pic" *ngFor="let teacher of group.teachers">
<img [src]="teacher.avatar" />
</div>
<h3>{{group.teachers.length}} leerkrachten</h3>
</ion-col>
<ion-row>
</ion-item>
</ion-card>
Try this new modification if it fits
<ion-card >
<ion-item>
<ion-row>
<ion-col col-6>
<ion-row> <h2>{{ group.name }}</h2></ion-row>
<ion-row>
<div class="pic" *ngFor="let student of group.students">
<img [src]="student.avatar" />
</div>
</ion-row>
<ion-row>
<h3>{{group.students.length}} Leerlingen</h3>
</ion-row>
</ion-col>
<ion-col col-6>
<ion-row>
<div class="pic" *ngFor="let teacher of group.teachers">
<img [src]="teacher.avatar" />
</div>
</ion-row>
<ion-row>
<h3>{{group.teachers.length}} leerkrachten</h3>
</ion-row>
</ion-col>
</ion-row>
</ion-item>
</ion-card>