I need to give space on image top and bottom so it will come centre and ion-col will go down.
<ion-content [fullscreen]="true" class="bg-class" text-center>
<ion-img src="assets/icon/moon_logo.png" style="width:80%; margin: auto;">
</ion-img>
<ion-col>
<div style=" margin: auto; padding-bottom: 15px;">
<ion-button expand="block" style="--background:white; color: #1B0B50;">Login</ion-button>
</div>
<div style="margin: auto;">
<ion-button expand="block">Get Started</ion-button>
</div>
<ion-row style="justify-content: center;">
<p style="color: #576898; font-size: 12px;">Privacy Policy</p>
<p style="color: #576898; font-size: 12px; padding-left: 20px;">Terms Of Use</p>
</ion-row>
</ion-col>
</ion-content>
Expected result to show
first, use ion-col inside ion-row and ion-row inside ion-grid or you'll be seeing unexpected result. now there are many solutions, one is using flex and flex-grow:
<ion-content [fullscreen]="true" class="bg-class" text-center>
<div style="display: flex; flex-direction: column; justify-content: center; width:
100%; height: 100%;">
<div style="flex-grow: 10;">
</div>
<ion-img src="assets/icon/moon_logo.png" style="width:80%; margin: auto;">
</ion-img>
<div style="flex-grow: 10;">
</div>
<ion-grid>
...
</ion-grid>
</div>
</ion-content>
Ionic provides css utilities for this type of stuff: https://ionicframework.com/docs/layout/css-utilities
Related
I have the following markup which uses bootstrap 4:-
<div class="container">
<div class="row ">
<div class="col-xl-12">
<img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-sm-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<img src="~/img/img2.png" class="mx-auto d-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
</div>
</div>
</div>
Currently i got this layout:-
where the images are centered while the text is left aligned, so how i can force the text to have the same vertical alignment as the images?
Try this, but edit classes or whatever to make it work on your site:
<div class="container" style="position:relative; display:inline-block;">
<img class="mx-auto d-none d-sm-block" style="display:block; height:60.3px;width:750px" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-tulips-blooming-in-field-royalty-free-image-1584131603.jpg">
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image</p>
</div>
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image 2</p>
</div>
</div>
Difficult to understand how this would work in your code as I don't have the complete code, but I edited my answer to better suit your request.
I have these 2 cards displayed on page:
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-card class="offersCard">
<ion-card-header>
<b>Company Name</b>
<br/>
<b>Dealer</b>
</ion-card-header>
<ion-card-content>
<div>
<div class="floatLeft imgStyle">
Image
</div>
<div class="floatRight">
<div>
Offer Descriptions:
<br/>
Offer Descriptions:...
Offer Descriptions:...
Offer Descriptions:...
Offer Descriptions:...
Offer Descriptions:...
</div>
</div>
</div>
<div>
<div class="floatLeft alignTxt">
Price:
d
</div>
<div class="floatRight fullBtn">
<button ion-button primary>CHECK OFFER</button>
</div>
</div>
</ion-card-content>
</ion-card>
<ion-card class="offersCard">
<ion-card-header>
<b>Company Name</b>
<br/>
<b>Dealer</b>
</ion-card-header>
<ion-card-content>
<div>
<div class="floatLeft imgStyle">
Image
</div>
<div class="floatRight">
<div>
Offer Descriptions:
<br/>
Offer Descriptions:
</div>
</div>
</div>
<div>
<div class="floatLeft alignTxt">
Price:
d
</div>
<div class="floatRight fullBtn">
<button ion-button primary>CHECK OFFER</button>
</div>
</div>
</ion-card-content>
</ion-card>
</ion-content>
When the card has a big text as description, it gets resized into left instead of keeping the same height and weight specified in the scss:
.offersCard{
.floatRight{
float: right;
white-space: normal;
margin-left: 4em;
}
.floatLeft{
float: left;
width: 10em;
vertical-align: middle;
}
div{
display: flex;
}
.imgStyle{
width: 150px;
height: 150px;
}
.fullBtn{
float: right;
margin-right: 0em
}
.alignTxt{
margin-top: 1em;
}
}
in addition, my "Check Offer" button is set to float to right, but it stays in the middle of the card.
Here is a full working stackblitz
Check the updated https://stackblitz.com/edit/ionic-acboxj
You need to specify width to floatRight
.floatRight{
float: right;
white-space: normal;
margin-left: 2em;
width: calc(100% - 150px - 2em);
}
Check the updated https://stackblitz.com/edit/ionic-xqm7sa
You need to specify justify property to fullBtn
.fullBtn{
justify-content: flex-end;
float: right;
margin-right: 0em;
}
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>