Remove bottom border from <ion-item> in Ionic 4

I’m trying to create a form that users will enter data into, and I’m using elements to contain the label and input for each part of the form. I keep getting a grey underline for each item, and I’ve tried to get rid of it using:

style="border-bottom: none !important">
style="border-bottom: 0px !important">
style="border-bottom: 1px solid white !important">
<ion-list no-lines> … </ion-list>
<ion-item no-lines> … </ion-item>

But nothing actually gets rid of the line. Has anybody successfully gotten rid of these in Ionic4?

10 Likes

Add the no-lines attribute to the item in html.

<ion-item no-lines>
2 Likes

just put ion-item tag inside ion-list with no-lines attribute

<ion-list no-lines>
<ion-item>  </ion-item>
</ion-list>
1 Like

I tried that, and the lines still appeared.

Tried that too, the lines were still visible.

can you share your code?

1 Like

In the end I decided to just not use around my elements, and created my own

and CSS to get the plain styling I wanted. Thanks for the responses though, I appreciate the support.

:+1: ok, most welcome

Try changing

<ion-list no-lines>

to

<ion-list lines="none">

It’s reflected in the docs now but not the breaking changes.

31 Likes

It works well for me, thx

<ion-list mode=“ios” lines=“none”>
in ionic 4

Did you try to clean your browser’s cache or stop/restart serve?

Try the below thing in your stylesheet related to your page. It may work

.item-inner{
border-style: unset !important;
}

Just put lines=“none” attribute in the respective tag
For eg,


2 Likes

Thanks it will work for me

Working perfect thanks

Not working this one

Thanks,probleme solved)

Its working perfect. Thanks @adamduren