I am unable to create columns that span 'n' number of columns with the col-n attribute. Not even the example provided in the guides. This currently displays for me 2 rows with 3 columns, all the same size:
<ion-grid>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-8>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col col-6>
2 of 3 (wider)
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
Ionic version: 2.2.1
you can you like this:
<ion-row>
<ion-col width-20></ion-col>
<ion-col width-80></ion-col>
</ion-row>
the first column will take up 20% of the width, and the second column will take up the remaining 80% of the width. You can use any combination of the following that adds up to 100:
width-10
width-20
width-25
width-33
width-50
width-67
width-75
width-80
width-90
The attributes col-*are available for the version 3 of Ionic, as documentation points out. The right grid attributes for version 2are the propoded by the accepted answer by #coenni.
Related
I have this code in ionic to ask for the postal and city of the user:
<ion-row>
<ion-col col-5>
<ion-item no-padding>
<ion-input type="number" class="input-without-icon"
[placeholder]="'reportDetails.contactData.label.postalCode' | translate"
[(ngModel)]="viewModel.model.contactData.postalCode"
(ngModelChange)="viewModel.update()"
[disabled]="viewModel.model.isSubmitted"></ion-input>
</ion-item>
</ion-col>
<ion-col col-7>
<ion-item no-padding>
<ion-input type="text" [placeholder]="'reportDetails.contactData.label.city' | translate"
[(ngModel)]="viewModel.model.contactData.city"
(ngModelChange)="viewModel.update()"
[disabled]="viewModel.model.isSubmitted"></ion-input>
</ion-item>
</ion-col>
</ion-row>
Now I added a service that returns a list of cities to the given postal. The number of cities can be from 0 to 5.
If the count is 1 the city name should be filled into the city input immediately. If the count is > 1 there should be a select where I can chose between the cities. Any suggestions how to achieve this?
you can use ngif for this.
*ngIf="cities?.length>0". if length is greater than
I am using ionic 2 and I would like to get a result like this:
For now, I have a simple ion-list :
<ion-list radio-group formControlName="type">
<ion-col col-4 >
<ion-item>
<ion-label>Breakfast</ion-label>
<ion-radio value="breakfast" ></ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Diner</ion-label>
<ion-radio value="diner" checked="true">
</ion-radio>
</ion-item>
</ion-col>
<ion-col col-4 >
<ion-item>
<ion-label>Lunch</ion-label>
<ion-radio value="lunch" checked="true">
</ion-radio>
</ion-item> </ion-col>
my result :
thanks
You need to implement Ionic Segment to get the expected result.
have a look Ionic-Segment
I am just learning about ionic grids.
I am working in a windows computer, the ionic verion is 2.2.3
I tried to follow the very simple example in https://ionicframework.com/docs/api/components/grid/Grid/ , section Equal-width. The logic is just like when using bootstrap, and I simply pasted the grid structure from there.
The result however is inline elements:
The code:
<ion-view view-title="{{::products.messages.title}}">
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
1 of 2
</ion-col>
<ion-col>
2 of 2
</ion-col>
</ion-row>
<ion-row>
<ion-col>
1 of 3
</ion-col>
<ion-col>
2 of 3
</ion-col>
<ion-col>
3 of 3
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ion-view>
This was just a test, so that I could play around with grids, but I am already stuck at this point. The only thing I could think of is that the installed version of ionic does not support grids. However, it is 2.2.3, and grids are supported for ionic 2.
check as following. You missed the number of columns definition in <ion-col>
<ion-grid>
<ion-row>
<ion-col col-12>This column will take 12 columns</ion-col>
</ion-row>
<ion-row>
<ion-col col-6>This column will take 6 columns</ion-col>
</ion-row>
</ion-grid>
I am trying to make a custom item containing 3 inputs in a list in ionic 2, but it's not working. When I put only 1 input, there's no problem. But if I put other tag with "
<ion-item *ngFor="let pergunta of avaliacao; let i=index">
<ion-row>
<ion-input placeholder="Pergunta" [(ngModel)]="pergunta.descricao" clearInput></ion-input>
</ion-row>
<ion-row>
<ion-textarea [(ngModel)]="pergunta.opcoes"></ion-textarea>
</ion-row>
<ion-row>
<ion-label>Obrigatória</ion-label><ion-checkbox [(ngModel)]="pergunta.obrigatoria"></ion-checkbox>
</ion-row>
</ion-item>
I did it. It seems I can't put several input inside ion-item. Just replaced ion-item for div
I'm trying to align a combo and an input text with ionic2.
When i use ion-item inside a ion-grid, it always occupies 50% of the page, without respecting the configured size.
Any idea how to do this?
<ion-row>
<ion-col width-30>
<ion-item>
<ion-select [(ngModel)]="type">
<ion-option value="work">work</ion-option>
<ion-option value="home">home</ion-option>
<ion-option value="cel">cel</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col width-70>
<ion-item>
<ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>
</ion-item>
</ion-col>
</ion-row>
https://plnkr.co/edit/BwdCrwECIXV6krWZBCzl?p=preview
Just like you can see in Ionic2 docs these are the values you can use to set the width of the columns:
Explicit Column Percentage Attributes
width-10 10%
width-20 20%
width-25 25%
width-33 33.3333%
width-50 50%
width-67 66.6666%
width-75 75%
width-80 80%
width-90 90%
That's why if you try to use width-30 or width-70, nothing will change. Instead, you can align those two fields by using width-33 and width-67 like you can see in this working plunker.
There, if you inspect the ion-col element in the browser, you'll see this style rule being applied:
ion-col[width-33], ion-col[width-34] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 33.3333%;
-ms-flex: 0 0 33.3333%;
flex: 0 0 33.3333%;
max-width: 33.3333%;
}
And
ion-col[width-66], ion-col[width-67] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 66.6666%;
-ms-flex: 0 0 66.6666%;
flex: 0 0 66.6666%;
max-width: 66.6666%;
}
Which was not happening with width-30 and width-70.
Try giving ion-item as the parent tag for ion-row
<ion-item>
<ion-row>
<ion-col width-30>
<ion-select [(ngModel)]="type">
<ion-option value="work">work</ion-option>
<ion-option value="home">home</ion-option>
<ion-option value="cel">cel</ion-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col width-70>
<ion-item>
<ion-input type="text" [(ngModel)]="phone" clearInput placeholder="Phone"></ion-input>
</ion-col>
</ion-row>
</ion-item>