Sampath Sampath - 1 year ago 124
Sass (Sass) Question

div and ion-list removed the col-6 effect on the grid

Below code is working fine.

.html

<ion-content class="content">
<ion-grid no-padding>
<ion-row class="row3">
<ion-col col-6 *ngFor="let d of data">
<presentation [data]="d"></presentation>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>


.scss

.content {
ion-grid {
height: 40%;
}
.row1 {
flex: 1;
padding: 5px 0 0 0;
.searchbar {
padding: 0 5px 5px 5px;
}
}
.row2 {
flex: 1;
}
.row3 {
.col * {
padding: 0 10px 10px 5px;
}
flex: 2;
}
img {
width: 100%;
height: 100%;
}
[col-1] {
img {
width: 100%;
height: 30%;
}
}
}


Renderd on Browser

enter image description here

UI 1:

enter image description here

I have changed it like this.Only
HTML
code.I have just introduced this 2 lines.

<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'kittens'">


.html

<ion-content class="content">
<ion-grid no-padding>
<ion-row class="row3">
<div [ngSwitch]="pet">
<ion-list *ngSwitchCase="'kittens'">
<ion-col col-6 *ngFor="let d of data">
<presentation [data]="d"></presentation>
</ion-col>
</ion-list>
</div>
</ion-row>
</ion-grid>
</ion-content>


Now rendered on Browser

enter image description here

UI 2:

enter image description here

You can see that, now there is no
col-6
effect.Can you help me to reinstate it back? In other words same as on the first use case.

When I replaced it with
div
it shows as below.It brakes
col-6
now.But I need 2 columns.Any trick?

<ion-row class="row3">
<div [ngSwitch]="pet">
<div *ngSwitchCase="'kittens'">
<div col-6 *ngFor="let d of data">
<presentation [data]="d"></presentation>
</div>
</div>
</div>
</ion-row>


UI 3:

enter image description here

Answer Source

As I see it, I think there is a problem with the HTML element nesting (between ion-row and ion-col). Because of that, the styles are not applying correctly for the ion-col.

Try changing your HTML as follows:

<ion-row class="row3">
    <ion-col col-6 *ngFor="let d of data">
        <div [ngSwitch]="pet">
            <div *ngSwitchCase="'kittens'">
                <presentation [data]="d"></presentation>
            </div>
            <!-- other ngSwitchCases -->
        </div>
    </ion-col>
</ion-row>

Cheers!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download