ion-content height 100% bigger than screen - ionic-framework

I need to build a single page vertically responsive, it needs to be full screen and no scroll.
I've tried doing
ion-content: {
height: 100%;
}
and many other possible solutions but nothing seems to work.
I've found that in small devices like iPhone SE the height of the ion-content is bigger than the screen of the device or the ion-content goes below the ion-tabs.
This is my problem (iPhone SE)
This is how i want it to look like (iPhone X)
Here is the ion-content:
<ion-content>
<ion-grid>
<ion-row>
<ion-col size="12">
<p *ngIf="![null, undefined, 'null', 'undefined'].includes(user_type)" class="user-type">{{user_type_text}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<ion-icon name="person-circle" class="avatar"></ion-icon>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="12">
<p>{{user_name}}</p>
</ion-col>
</ion-row>
<ion-row class="work-status">
<ion-col size="4">
<p class="work-status-label">Pending</p>
<p class="work-status-value" [style.color]="color_theme">{{pending}}</p>
</ion-col>
<ion-col size="4">
<p class="work-status-label">In Progress</p>
<p class="work-status-value" [style.color]="color_theme">{{progress}}</p>
</ion-col>
<ion-col size="4">
<p class="work-status-label">Completed</p>
<p class="work-status-value" [style.color]="color_theme">{{completed}}</p>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
<ion-card (click)="profile()">
<ion-icon name="person-circle" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">My Profile</p>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card (click)="notifications()">
<ion-icon name="notifications" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">Notifications</p>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col size="6">
<ion-card (click)="requests()">
<ion-icon [name]="request_button_icon" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">{{request_button_text}}</p>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card (click)="explore()">
<ion-icon name="search" class="btn-icon" [style.color]="color_theme"></ion-icon>
<p class="btn-text">{{explore_button_text}}</p>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Here is the scss:
ion-grid {
height: 100%;
}
ion-content {
height: 100%;
}
p {
text-align: center;
}
.user-type {
margin: 0;
}
.avatar {
font-size: 500%;
display: block;
margin-left: auto;
margin-right: auto;
}
.work-status{
-webkit-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.75);
margin-left: 5%;
margin-right: 5%;
margin-bottom: 5%;
}
.work-status-value {
margin-bottom: 0;
margin-top: 0;
font-size: 250%;
}
.work-status-label {
margin-bottom: 0;
margin-top: 0;
}
.btn-text {
font-size: 150%;
margin-top: 0;
margin-left: 2%;
margin-right: 2%;
}
.btn-icon {
font-size: 300%;
}

Add this in your CSS:
ion-card{
margin-bottom: 10px;
margin-top: 10px;
}

<ion-content [scrollY]="false" class="flex-card">
I still had to fiddle a little more to make it work correctly. This definitely put me on the right track. (flex-card is mine that makes the middle bit work the way I want it to...)

Related

SCSS styling inside of ion-item (Ionic framework)

I am struggling with getting styling correct. I think it is related to hierarchy of styling of the various ionic tags, but I am unsure.
In my app, I am trying to center some <ion-button> tags inside of columns of an <ion-grid>.
The result I keep getting is left-aligned buttons like this:
I have tried a variety of styles and classes to center the buttons. I have tried them at every level of the hierarchy (at the ion-item, grid, row, col, label, buttons, button levels), but I keep getting the same result.
Here is the structure of the item. In this iteration, you can see that I was trying to use the text-center attribute at the level of the row:
<ion-item>
<ion-grid>
<ion-row text-center>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button> Problem? </ion-button>
</ion-buttons>
</ion-label>
</ion-col>
<ion-col size="6">
<ion-label>
<ion-buttons>
<ion-button>More</ion-button>
</ion-buttons>
</ion-label>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
I've read the ionic documentation on the scss styling, but they don't discuss nested items like a grid inside of an ion-item.
I suspect that some element's styling is over-riding my attempt to center the buttons here and I need to understand the basic principle of styling hierarchy. Is there a place to go to learn this?
I've included the entire .scss file for reference, but I suspect I'm missing a principle:
.ios,
.md {
page-home {
#container {
text-align: left;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#container strong {
font-size: 20px;
line-height: 26px;
}
#container p {
font-size: 16px;
line-height: 22px;
color: #8c8c8c;
margin: 0;
}
#container a {
text-decoration: none;
}
ion-item {
padding-top: 0.5rem;
}
.center-button {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-item: center;
}
ion-col {
text-align: left;
}
ion-label {
font-weight: bold;
}
ion-title {
font-size: 1.5rem;
}
.item-name {
font-size: 2rem;
}
}
}
Thanks!
You can achieve this by adding these two css properties to ion-label
display: flex;
justify-content: center;
This cannot be the right way to solve the problem, but this is what I eventually did: I just put the styling information inline in the HTML. Here's an example:
<ion-row style="width: 100%; text-align: center">
<ion-item style="width: 100%; text-align: center">
<ion-col size="4" style="align-content: center">
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickProblem('button', item.name)"
>
Problem?
</ion-button>
</ion-buttons>
</ion-col>
<ion-col
size="4"
style="width: 100%; text-align: center"
*ngIf="item.notes"
>
<ion-buttons style="width: 100%; text-align: center">
<ion-button
style="width: 100%; text-align: center"
(click)="onClickMore('button', item.notes)"
>More</ion-button
>
</ion-buttons>
</ion-col>
You can see the "width: 100%; text-align: center" throughout. It is not the most maintainable solution, but it got me out of the purgatory of no progress.

hw to resize image ionic framework in grid view

I ve got this code, i want to reset images dimensions with css , any help ?
<ion-content class="categories">
<ion-row>
<ion-col size='6' size-sm="4" size-md="3" *ngFor="let category of data.mainCategories" (click)="getProducts(category.id)">
<ion-card class="category-card" class="ion-activatable ion-focusable hydrated" mode="md">
<ion-img alt="" src="{{category.image?.src}}"></ion-img>
<ion-card-header>
<ion-card-title [innerHTML]="category.name"></ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
</ion-content>
I tried
ion-img {
object-fit: resize;
height: 20px;
width: 20px;
border: 0;
padding: 0;
}

How to center image with width in ion-card

I need to center my image in ion-card. I am using width to small the image so thats why its causing problem to center image.
My html code.
<ion-content>
<ion-card class="no-shadow">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-center ion-justify-content-center" >
<ion-col size="6" >
<ion-card class="card-img">
<img src="../../assets/imgs/cat-icon.png" >
<div><h4>Programming</h4></div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
.scss
ion-content{
--ion-background-color: #202849 !important;
}
.no-shadow{
box-shadow: none !important;
}
ion-row{
ion-card{
text-align:center;
width:100% !important;
margin: 0 !important; // I also dont think important is neccesary
img{
width:90px;
border-radius: 50px;
}
}
}
Its showing image on left side. I need to show in center here is the image of output
<ion-card>
<div style="display: flex; align-items: center;justify-content: center;">
<img alt="image" src="assets/logo.png" />
</div>
</ion-card>
I think this will solve your problem
HTML code:
<ion-content>
<ion-card class="no-shadow">
<ion-grid class="ion-no-padding">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="6">
<ion-card class="card-img">
<img src="assets/shapes.svg">
<div>
<h4>Programming</h4>
</div>
</ion-card>
</ion-col>
<ion-col size="6">
<ion-card class="card-img">
<img src="assets/shapes.svg">
<div>
<h5>Programming</h5>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-card>
</ion-content>
SCSS:
ion-content {
--ion-background-color: #202849 !important;
}
.no-shadow {
box-shadow: none !important;
}
ion-row {
ion-card {
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
margin: 0px;
img {
width: 90px;
border-radius: 50px;
}
}
}
and !important is not required as you changing in page level without important it will work.

ionic 4 ion-grid not going to centered/

I am tring to show my grid centered on screen but it showing on right side
Here is my code
<ion-content class="ion-padding">
<h3 style="margin-left: 15px;margin-top: 30px;">Home</h3>
<div>
<ion-grid style="height: 100%">
<ion-row class="ion-align-items-center ion-justify-content-center">
<ion-col size="6" *ngFor="let x of data">
<ion-card class="card-img" (click)="detail()">
<img src="../../assets/img/demo.jpg" style="height: 180px; width: 150px;">
<div style="text-align: center;" class="boxe">
<ion-icon name="checkmark" class="tick" color="medium"></ion-icon>
<ion-icon name="close" class="cross" color="dark"></ion-icon>
</div>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</div>
</ion-content>
.scss
.card-img{
border-radius: 10px;
width: 150px;
}
.tick{
text-align:center;
font-size: 30px;
}
.cross{
text-align:center;
font-size: 30px;
}
As in image in need to centered the grid and remove top spaces between images
Try This : -
page.scss
.card-img{
border-radius: 10px;
img{
width: 100%;
}
}

Ionic 2 horitzonal scroll with ion items

I'm trying to create a list of avatars, and each avatar to appear in the right of the previous avatar. When an avatar reaches the end of the screen, the user will be able to scroll left or right to see more avatars.
I achieved this with the following code which worked in the previous ionic grid version, and now no longer works and when an avatar reaches the end of the screen, a new line is created instead of keep added to the same line with an option to scroll horitzonally:
<ion-scroll scrollX="true" class="chooseBg" style="height:70px">
<ion-row>
<ion-col *ngFor="let avatar of avatars"
style="padding-right:0">
<ion-item>
<ion-avatar>
<img
[src]="avatarImage(avatar)"/>
</ion-avatar>
</ion-item>
</ion-col>
</ion-row>
</ion-scroll>
Any ideas how I can create hortizonal scroll of items using latest ionic grid system? (Ionic 2.2)
This is my Horizontal Scroll with clickable Cards in it:
<ion-scroll scrollX="true" class="item" style="width:100vw;height:100%;margin:0px;padding:0px;">
<ion-row>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Rap")'>
<img style="width:33vw;" src="assets/img/rap.png"/>
<div text-wrap class="card-title-mini">Rap</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Singing")'>
<img style="width:33vw;" src="assets/img/sing.png"/>
<div text-wrap class="card-title-mini">Singing</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Skateboard")'>
<img style="width:33vw;" src="assets/img/skateboarding.png"/>
<div text-wrap class="card-title-mini">Skateboard</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Workout")'>
<img style="width:33vw;" src="assets/img/workout.png"/>
<div text-wrap class="card-title-mini">Workout</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Drawing Tattoo")'>
<img style="width:33vw;" src="assets/img/drawingtattoo.png"/>
<div text-wrap class="card-title-mini">Drawing Tattoo</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Shuffle")'>
<img style="width:33vw;" src="assets/img/shuffle.png"/>
<div text-wrap class="card-title-mini">Shuffle</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Gaming")'>
<img style="width:33vw;" src="assets/img/gaming.png"/>
<div text-wrap class="card-title-mini">Gaming</div>
</ion-card>
</ion-col>
<ion-col >
<ion-card tabable class="card-width" (click)='categorieDetail("Beatbox")'>
<img style="width:33vw;" src="assets/img/beatbox.png"/>
<div text-wrap class="card-title-mini">Beatbox</div>
</ion-card>
</ion-col>
</ion-row>
</ion-scroll>
Well its hardcoded but you can fill it like you do with *ngFor as well.
this is my css:
ion-card {
position: relative;
text-align: center;
margin: 0;
}
.column-width {
width: 100px;
}
.card-width {
width: 33vw;
padding: 0px !important;
margin: 0px !important;
background-color : transparent;
color : transparent;
height: 33vw;
}
.card-title-mini {
position: absolute;
top: 45%;
font-size: 5vw;
width: 100%;
color: #fff;
font-weight: bold;
}
This scroll works on all devices and browsers.
Maybe my scroll might be helpfull for you.