ion-item 'lines' attribute does nothing (docs incorrect?)

Ionic version: (check one with “x”) (For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1) [ ] 2.x [ ] 3.x [x] 4.x

I’m submitting a … (check one with “x”) [x] bug report [ ] feature request

Current behavior:

Please see forum conversation here.

Your documentation is incorrect. The documentation states that the lines attribute must be placed on the ion-item component. However, that didn’t work. Instead, the lines attribute needs to be placed on the ion-list component.

Expected behavior:

Hide lines when lines attribute is supplied on the ion-item component.

Steps to reproduce:

Related code: Forum link.

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

insert the output from ionic info here

[brandyscarney]

It’s a bug because of the ion-menu-toggle wrapper. Because our CSS is targeting the item:last-child to apply a border on it, and it is wrapped in another element, it is always considered the last-child of that element so it is getting the border even with lines="none" applied to the item. This is something we need to fix.

With that said, it seems that the issue here is actually with the following rule being applied because of the ion-menu-toggle element wrapping the item:

.list-ios:not(.list-inset):not(.list-ios-lines-none) .item:last-child {
    --inner-border-width: 0;
    --border-width: 0 0 0.55px 0;
}

[a11smiles]

@brandyscarney I’m not necessarily saying the documentation isn’t correct. As a matter of fact, the lab environment rendered correctly in Safari with the lines="none" on the ion-item element. However, the Ion DevApp still rendered the lines.

The only way for the Ion DevApp to hide the lines was me applying thelines attribute to the ion-list.

To refresh…

This did not work:

    <ion-list>
      <ion-menu-toggle *ngFor="let page of appPages">
        <ion-item lines="none" detail-none [routerLink]="page.url" [routerDirection]="'root'">
          <ion-icon slot="start" [name]="page.icon" color="primary"></ion-icon>
          <ion-label>{{page.title}}</ion-label>
        </ion-item>
      </ion-menu-toggle>
    </ion-list>

This did work:

<ion-app>
  <ion-split-pane>
    <ion-menu type="overlay">
      <ion-header>
        <ion-toolbar>
          <ion-title>
            Menu
          </ion-title>
        </ion-toolbar>
      </ion-header>
      
      <ion-content padding>
        <ion-list lines="none">
          <ion-menu-toggle *ngFor="let page of appPages">
            <ion-item detail="false" [routerLink]="page.url" [routerDirection]="'root'">
              <ion-icon slot="start" [name]="page.icon" color="primary"></ion-icon>
              <ion-label>{{page.title}}</ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

Perhaps, it’s a bug in the Ion DevApp? Or, as you suggested, a CSS issue?

Thanks.