Add custom rule between ionic <ion-item>

Question

I am trying to put a custom horizontal rule between the <ion-item> s in my list.

My CSS works fine with <ion-list> except that <ion-list> adds its own rules which I don't want. I just want my custom rule.

If I try using <ion-list no-lines> (to remove the rules that <ion-list> adds automatically my CSS doesn't work any more, and I don't get my custom rules.

My CSS is:

.my-item {
  border-style:solid;
  border-bottom-width: 11px;
  border-bottom-color: black;
}

My HTML is:

<ion-list>
  <ion-item class="my-item>Something</ion-item>
  <ion-item class="my-item>Something Else</ion-item>
</ion-list>

ADDED MY REAL CODE

In case this helps here is the actual code I am using:

 page-my-plans { } .pu-my-plans-plus-circle { display: block; //border: 2px solid white; background-color: $pu-orange; border-radius: 50%; height: 38px; width: 38px; } .pu-my-plans-plus-circle span { font-size: 38px; font-weight: 100; color: white; position: absolute; top: -7px; left: 8.5px; } .pu-plan-addButton { font-size: 30px; margin-right: 14px; margin-top:-2px; } .pu-section-list-item{ color: black; font-weight:$pu-item-font-weight; font-size:$pu-item-font-size; padding-left:20px; padding-right:0px; margin-bottom: 4px; } .item{ background: transparent !important; } // THEMING CSS // =========== // .pu-my-plans-background { background-image: url("../assets/img/PU_Light_BG_1.png"); background-size: cover !important; } .pu-my-plans-item { border: none; border-bottom: 11px solid black; } .pu-my-plans-plan-date { color: black; //$pu-orange; font-size: 11px; font-weight: 200; }

 <ion-content class="pu-my-plans-background"> <div *ngIf="hasPlans"> <ion-list no-lines class="pu-item-list"> <!--<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">--> <ion-item-sliding *ngFor="let plan of plans; let i = index" > <ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)"> {{ plan.title }} <br> <span class="pu-my-plans-plan-date">{{ plan.updated}}</span> <button *ngIf="plan.important" ion-button clear item-right> <ion-icon name="ios-alert-outline"></ion-icon> </button> </ion-item> <ion-item-options side="right"> <button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)"> <ion-icon name="delete"></ion-icon> Delete </button> </ion-item-options> <div class="xxx">SOME TEXT</div> </ion-item-sliding> <!--</ion-item-group>--> </ion-list> </div> </ion-content>

With this code my attempts to get a border rule fail. If I add no-lines to <ion-list> my border works but I also get the lines that <ion-list> produces.

This is what it looks like with the code above:

If I take away no-rules it looks like this:

There is a rule at the bottom of the list and the last item does not have the border I am trying to apply.

Answer 1

Just preface your own border with a reset.

.my-item {
    border: none;
    border-bottom: 11px solid black;
}

Edit:

Ionic 2's ios styles also contain a rule, specific to the last child and it's border, which is what needs to be overridden here.

.list-ios>.item-block:last-child, .list-ios>.item-wrapper:last-child .item-block { 
    border-bottom: .55px solid #c8c7cc; 
}

Answer 2

I can help you, but i need to acces source code. http://view.ionic.io/