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>
Related
I am tring to build a simple grid in which there is a card i need to show cards by 2x2 format.
<ion-row>
<ion-col *ngFor="let data of dataa" > let assume it will be 10
<ion-card style="width: 200px;">
<img src="assets/imgs/shoe-air.jpg">
<ion-row>
<ion-col>
<ion-badge>Available</ion-badge>
</ion-col>
<ion-col style="text-align: right; font-size: 20px;">
<ion-icon name="heart" color="secondary" ></ion-icon>
</ion-col>
</ion-row>
<ion-button class="offer">{{(2500 - 2000) /2500*100}}%</ion-button>
<p><span class="regular-price" >RS. 2000<span class="special-price"><del> RS. 2500</del></span></span></p>
</ion-card>
</ion-col>
</ion-row>
Its just a template so there is only one card. but when ill fetch data it will be 9 or 8.
I need to show like this
2x2
2x2
2x2
The responsive grid in Ionic is based on a 12 column layout.
If you want to have a 2-column wide (each column takes up 50%) grid, set size=6 on your columns like so:
<ion-grid>
<ion-row>
<ion-col size="6" *ngFor="let data of dataa">
<ion-card>
....
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
I have an element which is a header with two buttons. I have the buttons organized in a ion-grid, where the two buttons are side by side with the same size and centered in the column. This way the size is perfect for mobiles, but the buttons are too big when using a browser:
<ion-header>
<ion-toolbar>
<ion-grid>
<ion-row>
<ion-col size="6" class="ion-text-center">
<ion-button style="width: 75%;">Menu</ion-button>
</ion-col>
<ion-col size="6" class="ion-text-center">
<ion-button style="width: 75%;">Abcdefghijklmn</ion-button>
</ion-col>
</ion-row>
</ion-grid>
</ion-toolbar>
<style>html, body { margin: 0; }</style>
</ion-header>
I tried to change the min-width and max-width, but when it gets perfect for browser screen size it gets too small for mobile and the button became smaller then the text inside.
As suggested here, I tried to apply expand="full", class="ion-text-wrap" and set a max-width to the button, but it loses its center property defined by class="ion-text-center" on ion-col. I then added style="text-align: center" to maintain the center property in ion-col tag, but does not make difference`.
Stackblitz
You can make responsive grid like this. (You may adjust grid size for your use case)
Ref : https://ionicframework.com/docs/layout/grid#grid-size
<ion-grid>
<ion-row>
<ion-col size-sm="6" size="6" class="ion-text-center">
<ion-button expand="full" class="ion-text-wrap min-max-width">Menu</ion-button>
</ion-col>
<ion-col size-sm="6" size="6" class="ion-text-center">
<ion-button expand="full" class="ion-text-wrap min-max-width">Abcdefghijklmn</ion-button>
</ion-col>
</ion-row>
</ion-grid>
<style>
.min-max-width {
max-width: 200px;
margin: 0 auto;
}
</style>
I am developing a simple app with Ionic v4 framework, and I have an ion-grid like this:
<ion-grid>
<ion-row>
<ion-col *ngFor="let item of items">
<ion-avatar>
<img src="{{item.getItemImgUrl()}}" />
</ion-avatar>
</ion-col>
</ion-row>
<ion-row>
..........
</ion-row>
</ion-grid>
May anyone tell me how I can align the ion-avatar exactly in the center of the ion-col?
I've tried text-align: center; in my css sheet, but it doesn't work.
Thanks a lot!
I had the same problem. I solved it by using
<ion-col style="display: flex; justify-content: center">
How to remove unnecessary padding in ion-item with ion input in ionic-3 ?
<ion-row align-items-center>
<ion-col col-3></ion-col>
<ion-col text-right no-padding col-4.5>
Canister Width <p>(C.W.)</p>:
</ion-col>
<ion-col no-lines ion-item no-padding>
<ion-input></ion-input>
</ion-col>
</ion-row>
You can't remove a padding from item in the tag with the ion-item attribute because it's not the ion-item who has a padding, but the item-inner child who is generated inside.
That's why no-padding doesn't works, but you can simply do this with css like this
.item .item-inner {
padding-left: 0px;
}
Hope this helps.
try this ?
<ion-row align-items-center no-padding>
or you can add <div no-padding>
?
add below code into your css
ion-item{padding:0 !important}
or
you can add inline css in HTML file
<ion-row align-items-center>
<ion-col style="padding:0">
Canister Width <p>(C.W.)</p>:
</ion-col>
</ion-row>
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.