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>
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 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 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 want to implement three ion-button's in ion-footer, each algining to left, middle and right respectively.
It seems ion-button's with start and end can do left and right.
How about middle? I have checked the API and ion component, it seems ion-title is by default centered, but there is no out-of-box way to get button in the middle?
In the ion-footer element, try using ion-grid and then remove the padding from the grid.
<ion-footer>
<ion-grid>
<ion-row no-padding no-margin>
<ion-col col-4 no-padding>
<button ion-button full>Button 1</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 2</button>
</ion-col>
<ion-col col-4 no-padding>
<button ion-button full>Button 3</button>
</ion-col>
</ion-row>
</ion-grid>
</ion-footer>
You can add the float-start and float-end to the first and third button respectively. By making use of float-[start|end] instead of float-[left|right] your buttons will shift position with the app direction
HTML:
<ion-footer>
<div class="btn-wrapper">
<button ion-button float-start>Button1</button>
<button ion-button>Button2</button>
<button ion-button float-end>Button3</button>
</div>
</ion-footer>
CSS:
.btn-wrapper {
text-align: center;
}
EDIT:
Added a wrapping <div> for the buttons and gave it the style text-align: center;, becasue I was experiencing weird animation behavior without the wrapping <div>.