Ion-row doesn't show borders

Ionic Framework ionic-v3
1

I have the following table.html file:

<ion-grid>
  <ion-list *ngFor="let item of data" no-padding no-margin>
    <ion-row no-padding no-margin class="vp-row">
      <ion-col *ngFor="let attr of showCols">
        {{item[attr]}}
      </ion-col>
    </ion-row>
  <ion-list>
<ion-grid>

And the following CSS class:

table { 
  .vp-row {
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: medium gray(34);
  }
}

I would have thought that Ionic should give me a medium gray line under each row, but it doesn’t.
Please help.

BTW: I tried a million different ways to do this. I wrapped each row in a <div> and tried to give a border to the div, to no avail. I tried <ion-item-divider>, which does show a line, but takes way too much space and there seems to be no way to reduce its height at all. In fact, these rows seem immune to any kind of CSS manipulation.

2

Figured it out. Needed to modify col CSS, not row CSS.

1 Like