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;
}
Related
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...)
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.
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%;
}
}
I have a tabular design from which two ion-col in a ion-row have different number of lines. but I need to align both the content in the middle. what would be best solution for this?
<ion-content padding>
<ion-grid>
<ion-row>
....other cols....
<ion-col col-6>
<label>Date of Audit:
<h2>01/30/18<br/>
1:06:50<small>PM UTC</small></h2>
</label>
</ion-col>
<ion-col col-6 text-center center class="overall-score">
<label>Overall Score:
<h1>40%</h1>
</label>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
The style need to be applied to the ion-col, in order to center its content.
CSS:
ion-col {
text-align: center;
}
or
HTML:
<ion-col class="someclass">
CSS:
ion-col.someclass {
text-align: center;
}
add ion-row
<ion-col>
<ion-row style="min-height:100%" justify-content-center align-items-center>
<p>test</p>
</ion-row>
</ion-col>
Create a new css class:
.align-text-middle {
display: flex;
align-items: center;
}
And add that class to the ion-col.
Use Grids, rows and cols for good practices, read the Ionic documentation, simple and effective.
For center with this:
<ion-grid>
<ion-row justify-content-center>
<h1>This is center</h1>
</ion-row>
</ion-grid>
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.