Problem with ion-col in ionic 3

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

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.

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??

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 http://blog.ionic.io/build-awesome-desktop-apps-with-ionics-new-responsive-grid/ sounds relevant

1 Like

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