Problem with ion-col in ionic 3

Ionic Framework ionic-v3
1

I am using <ion-col> attribute at a lot of places in my project… Earlier with ionic 2, it worked fine… Then I upgraded to ionic 3 and this attribute changed… Now it takes a lot more width and it changed my overall design, Please refer to the images

Earlier it was :

image

Now it is :
image

The code of the above line is :

<ion-item tappable>
            <ion-grid>
                <ion-row>
                    <ion-col width-20>
                        <div class="icon-profile">
                            <ion-icon name="person" class="white-text"></ion-icon>
                        </div>
                    </ion-col>
                    <ion-col width-60>
                        <div style="font-size:1.6rem;font-weight:bold;"> Personal Information </div>
                        <div style="font-size:1.4rem" *ngIf="userDetails.userFullName!='' "> {{userDetails.userFullName}}, {{userDetails.userPhoneNumber }}</div>
                        <div style="font-size:1.4rem;color:red;" *ngIf="userDetails.userFullName =='' ">Update Your Details</div>
                    </ion-col>
                    <ion-col width-20 style="text-align: right;">
                        <div class="icon-track-call"  style="text-align:right">
                            <ion-icon name="arrow-dropright" class="dullcolor"></ion-icon>
                        </div>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-item>

So basically wherever I used ion-col, things have changed there now… Earlier I was on ionic 2.0.0… Please help me out…

1 Like
2

Look at the elements using Developer Tools -> Inspect of your browser. Shouldn’t be too had to figure out which element got some addition margin/padding or what actually “uses” that space.

3

Yes, an extra class named ‘col’ gets added to the ion-col tag which has some new properties like flex… But I couldn’t figure out how the design will exactly be like previous design cz there are many different properties… Did anyone else face such situation??

4

Did you follow the upgrade guide on the new grid system?

All instances of width-* attributes will need to be changed to use col-*. So for example, if you have the following:

<ion-col width-50>col</ion-col>

it should be changed to take up 50% of the available columns, so 6 columns:

<ion-col col-6>col</ion-col>

from Build Awesome Desktop Apps with Ionic's NEW Responsive Grid - Ionic Blog sounds relevant

1 Like
5

Yes thank you… It helped… But now I need to rework on the design of my whole project