List dividers (lines) in cards

Ionic Framework ionic-v3
1

When I add a list to a card, the list items are not divided by lines, anymore.
How can I add these lines back to the list?

1 Like
2

Does nobody have an idea?
I want to implement it similar to this approach:

http://coenraets.org/blog/wp-content/uploads/2016/01/IonicRealty01.jpg

However, if I add a list or grid to the card, the dividing lines disappear…

Appreciate your help!

3

Could you please show us the accompanied code? The lines are there by default, so it’s probably something in the implementation that made them disappear.

4

That’s what I thought… But as soon as the list is in the card’s content, the lines disappear.

For example, this code:

<ion-content>

  <ion-card>
    <ion-card-content>
      <ion-card-title>
        CardTitle
      </ion-card-title>

      <ion-list>
        <ion-item>Test1</ion-item>
        <ion-item>Test2</ion-item>
        <ion-item>Test3</ion-item>
      </ion-list>
      
    </ion-card-content>
  </ion-card>

</ion-content>

… results in this:

5

Your code looks solid. It’s by design as far as I can tell from the docs that lists inside cards don’t have lines by default. I would solve it through CSS:

.card .list .item {
    border-bottom: 1px solid green;
}
3 Likes
6

Hi @luukschoen.
Thanks for your reply. If I user border-bottom, the border is - of course - shown for the full item, including the icon in the beginning.
However, I want to show it only below the text, not below the icon in the beginning (see picture in first entry). This is how it should typically be with a list of items (see documentation).

7

wrap ion-list into a div give them class named mycard (whatever you want)
and paste following code to scss file

.mycard{
margin: 10px;
border-radius: 2px;
width: calc(100% - 20px);
font-size: 1.4rem;
background: #fff;
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

<div class=“mycard”>
<ion-list>
<ion-item>Test1</ion-item>
<ion-item>Test2</ion-item>
<ion-item>Test3</ion-item>
</ion-list>
</div>