Menu
How I can remove <ion-item> divider? I have the following code to show 4 items in a row:
<ion-row ion-list> <ion-col width-25 *ngFor="let player of players"> <ion-item color="dark"> <ion-avatar item-left> <img [src]="photo" class="img img-circle"/> </ion-avatar> {{user.name}} </ion-item> </ion-col> </ion-row> and the output shows 4 images in a row, as excepted, but each image has a white divider below it. I don't want any divider.
I tried to set style="border:none" but it didn't do it.
424
May be ion-col, ion-row has some css which is showing the border. Usually in grid systems there is padding in place to create "air" between the blocks. I think style="padding: 0" on your ion-col element should do the trick.
Simply give pointer-events:none css to disable click. Show activity on this post. This will remove ripple effect but will keep the element clickable. For example, you can have ion-checkbox inside ion-item and pointer-events:none; will prevent from clicking on it which might not be the behaviour that you need.
In Ionic 4 you can use ion-hide as well as add breakpoints to determine when to hide based on the screen width.
For whatever reason, this didn't work for me. But having lines="none" worked great.
For ionic v4
<ion-item lines="none">...</ion-item>
Pulled from ionic docs. https://ionicframework.com/docs/api/list
35
This is for ionic 2 and 3. Please refer to this answer for higher versions of ionic
use no-lines
<ion-row ion-list> <ion-col width-25 *ngFor="let player of players"> <ion-item no-lines color="dark"><!-- here --> <ion-avatar item-left> <img [src]="photo" class="img img-circle"/> </ion-avatar> {{user.name}} </ion-item> </ion-col> </ion-row> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
