Ionic 2/3 list item : item inside item

Question

I'm working in ionic project and I want to create a notification list page, the list is a little bit customized as the image bellow show :

this is the result i get when I run my code :

here is the html code :

<ion-content>
    <ion-list no-line>
        <ion-item>
            <ion-thumbnail item-end>
                <img src="img/garbage1.jpg">
            </ion-thumbnail>
            <ion-row>
                <ion-col>
                    <ion-item class="notification-informations">
                        <label class="notification-title">Parrot refused</label>&nbsp; &nbsp;<small class="date-notification">YESTERDAY</small>
                        <p class="text-notification">You earned <small class="star-number">25</small>
                            <ion-icon class="star-notification" name="md-star"></ion-icon> with 3 tags</p>
                    </ion-item>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-item class="user-notification">
                    <ion-avatar item-start>
                        <img class="user-image" src="img/profile.jpg">
                    </ion-avatar>
                    <div class="username">
                        <small class="user-name">Chicken chika</small>
                    </div>
                </ion-item>
            </ion-row>
        </ion-item>

        <ion-item>
            <ion-thumbnail item-end>
                <img src="img/garbage1.jpg">
            </ion-thumbnail>
            <ion-row>
                <ion-col>
                    <ion-item class="notification-informations">
                        <label class="notification-title">Parrot refused</label>&nbsp; &nbsp;<small class="date-notification">YESTERDAY</small>
                        <p class="text-notification">You earned <small class="star-number">25</small>
                            <ion-icon class="star-notification" name="md-star"></ion-icon> with 3 tags</p>
                    </ion-item>
                </ion-col>
            </ion-row>
            <ion-row>
                <ion-item class="user-notification">
                    <ion-avatar item-start>
                        <img class="user-image" src="img/profile.jpg">
                    </ion-avatar>
                    <div class="username">
                        <small class="user-name">Chicken chika</small>
                    </div>
                </ion-item>
            </ion-row>
        </ion-item>



    </ion-list>
</ion-content>

and here the css :

page-notification {
    .item-md {
        padding-left: 16px;
        padding-right: 0;
        position: relative;
        font-size: 1.6rem;
        font-weight: normal;
        height: 110px;
        text-transform: none;
        color: #000;
        background-color: #fff;
        -webkit-box-shadow: none;
        box-shadow: none;
        -webkit-transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
        transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .notification-informations {
        padding-left: 5px;
        height: 35px;
    }
    .col {
        padding: 0;
    }
    .star-notification {
        color: color($colors, starcolor);
    }
    .star-number {
        font-weight: 600;
        font-size: 13px;
        color: color($colors, profileblue);
    }
    .item {
        border-style: none
    }
    .date-notification {
        margin-left: -8px;
        font-size: 8px;
        color: color($colors, icon-stat);
    }
    .text-notification {
        color: color($colors, icon-stat);
        font-weight: 500;
        font-size: 13px;
        margin-top: 4px;
    }
    .user-notification {
        height: 20px;
        padding-left: 0;
    }
    .user-image {
        border-radius: 50%;
        width: 20px;
        height: 20px;
    }
    img>.user-image {
        width: 20px;
        height: 20px;
    }
    .item-md ion-avatar img {
        border-radius: 50%;
        overflow: hidden;
        width: 25px;
        height: 25px;
    }
    .item-md ion-avatar[item-start],
    .item-md ion-thumbnail[item-start] {
        margin: 30px -5px 4px 5px;
    }
    page-notification .label-md {
        margin-top: 13px;
        margin: -9px 8px 13px 0;
    }
    .user-name {
        color: color($colors, profileblue);
        font-weight: 600;
    }
    .username {
        margin-top: 17px;
    }
    .item-md ion-thumbnail img {
        width: 60px;
        height: 60px;
    }
    .notification-title {
        font-size: 15px;
    }
}

can some one please help to create correctly the list with the correct design for tthe items? thank in advance

Answer 1

Cannot see any problems related to your code. All you have to do is remove the border-bottoms (you can do it with border:0) and create a card for Survey part above ion-list.

I have created a plunker with your code. see this