HTML with Ionic3, how to seperate rows

Issue

I have this HTML where I need to seperate each row, how can I do this?

This is what I have:

enter image description here

<ion-grid class"grid-16 box">
    <ion-row *ngFor"let device of connectedDevices" align-items-center>
        <button ion-item ion-col col-12 (click)"selectDevice(device)">
            <ion-col col-auto><img [src]"getIcon(device.physAddress)" height"28"></ion-col>
            <ion-col>{{ getName(device.physAddress, device.hostName) }}</ion-col>
            <ion-col col-auto>
                <ion-row>
                    <ion-col class"grid connection">
                        <img *ngIf"device.interfaceType  'Wifi'" src"assets/icon/ico_device_wifi.svg" width"21">
                        <img *ngIf"device.interfaceType  'Ethernet'" src"assets/icon/ico_device_lan.svg" width"21">
                    </ion-col>
                </ion-row>
                <ion-row>
                    <ion-col class"grid success">{{ liveboxWifiDevicesCms.literalConnected }}</ion-col>
                </ion-row>
            </ion-col>
        </button>
    </ion-row>
</ion-grid>

This is what I need:

enter image description here

Solution

The class that you have used box I guess it is the box with shadow. Use this class on ion-row instead of ion-grid . Along with that use some margin-bottom in ion-row

Answered By – sharmag 2

Leave a Comment