Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
a11smiles opened this issue Aug 15, 2018 · 5 comments · Fixed by #16456

Comments

@a11smiles
Copy link

commented Aug 15, 2018

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

@ionitron-bot ionitron-bot bot added the triage label Aug 15, 2018

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Aug 15, 2018

Thanks for the issue! The lines attribute works on both the ion-list component (to affect all items) or a single ion-item component. Our documentation for that is here:

Examples (all in iOS):

Default list, without lines property:

<ion-list>
  <ion-list-header>Default lines</ion-list-header>
  <ion-item>Pokémon Yellow</ion-item>
  <ion-item>Super Metroid</ion-item>
  <ion-item>Mega Man X</ion-item>
  <ion-item>The Legend of Zelda</ion-item>
  <ion-item>Pac-Man</ion-item>
</ion-list>

screen shot 2018-08-15 at 11 38 20 am

Default list, item with lines="none":

<ion-list>
  <ion-list-header>Item lines: none</ion-list-header>
  <ion-item lines="none">Pokémon Yellow</ion-item>
  <ion-item lines="none">Super Metroid</ion-item>
  <ion-item lines="none">Mega Man X</ion-item>
  <ion-item lines="none">The Legend of Zelda</ion-item>
  <ion-item lines="none">Pac-Man</ion-item>
</ion-list>

screen shot 2018-08-15 at 11 36 20 am

List with lines="full":

<ion-list lines="full">
  <ion-list-header>Lines: full</ion-list-header>
  <ion-item>Pokémon Yellow</ion-item>
  <ion-item>Super Metroid</ion-item>
  <ion-item>Mega Man X</ion-item>
  <ion-item>The Legend of Zelda</ion-item>
  <ion-item>Pac-Man</ion-item>
</ion-list>

screen shot 2018-08-15 at 11 34 38 am

If you could point to where our documentation is incorrect that would be helpful. 🙂

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

This comment has been minimized.

Copy link
Author

commented Aug 15, 2018

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

@brandyscarney

This comment has been minimized.

Copy link
Member

commented Aug 15, 2018

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;
}
@RHinderiks

This comment has been minimized.

Copy link

commented Oct 5, 2018

Any news on this issue in beta.12 is still have a final border on the last ion-item even with lines="none"

@brandyscarney brandyscarney added this to Backlog 🤖 in Ionic Core via automation Oct 9, 2018

@ionitron-bot ionitron-bot bot removed the triage label Oct 9, 2018

@brandyscarney brandyscarney referenced this issue Oct 9, 2018
42 of 46 tasks complete

@brandyscarney brandyscarney self-assigned this Nov 2, 2018

@brandyscarney brandyscarney moved this from Backlog 🤖 to On deck ⚾️ in Ionic Core Nov 2, 2018

brandyscarney added a commit that referenced this issue Nov 26, 2018

Ionic Core automation moved this from On deck ⚾️ to Done 🎉 Nov 26, 2018

brandyscarney added a commit that referenced this issue Nov 26, 2018
@ionitron-bot

This comment has been minimized.

Copy link

commented Dec 26, 2018

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Dec 26, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
3 participants
You can’t perform that action at this time.