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

Ionic Framework
1

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?

11 Likes
2

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

<ion-item no-lines>
2 Likes
3

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

<ion-list no-lines>
<ion-item>  </ion-item>
</ion-list>
5 Likes
4

I tried that, and the lines still appeared.

5

Tried that too, the lines were still visible.

6

can you share your code?

1 Like
7

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.
8

:+1: ok, most welcome

9

Try changing

<ion-list no-lines>

to

<ion-list lines="none">

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

66 Likes
10

It works well for me, thx

11

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

12

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

13

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

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

1 Like
14

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

…

2 Likes
15

Thanks it will work for me

16

Working perfect thanks

18

Not working this one

19

Thanks,probleme solved)

20

Its working perfect. Thanks @adamduren