I'm currently working on adding a custom horizontal rule between the <ion-item>s in my list.
While my CSS is functioning correctly with <ion-list>, it's inserting its own rules that I want to avoid. I only want my customized rule to be applied.
If I attempt to use <ion-list no-lines> to eliminate the automatically added rules and maintain my custom styling, my CSS stops working altogether.
Here's my CSS code:
.my-item {
border-style: solid;
border-bottom-width: 11px;
border-bottom-color: black;
}
This is what my HTML looks like:
<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 snippet I am using:
Including additional attributes on my <ion-list> element causes my attempts at applying a border rule to fail. Adding no-lines to <ion-list> successfully displays my border but also includes the unwanted lines generated by <ion-list>.
See screenshots for reference:
https://i.sstatic.net/4C6a9.jpg
https://i.sstatic.net/a9liz.jpg
The first image shows the desired border rule along with unwanted lines from <ion-list>, while the second image demonstrates removal of the no-rules attribute resulting in a missing border at the bottom and final item.