Ionic-framework: bug: ion-list attribute "lines" not working when attribute "inset" is true

[DwieDima]

Bug Report

Ionic version:


[x] 5.0.5

Current behavior:

When you create an ion-list with ion-items and set the attribute inset="true" on ion-list, the attribute lines wont have any effect on ion-item. Instead you'll always see full lines.

Expected behavior:

attribute lines on ion-list should work when attribute inset="true" is set.

Steps to reproduce:

copy paste this snippet to any page:

 <ion-list inset="true" lines="full">
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
    <ion-item detail="true">
      <ion-label>test</ion-label>
    </ion-item>
  </ion-list>

• change lines attribute to lines="none", lines="inset" --> no effect.
• removing lines attribute will remain in lines="full".
  
  
  
  • Isn't the default behaviour lines="inset" ?
  
  

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 6.2.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.0-dev.202003171608.9d9a02f
   @angular-devkit/build-angular : 0.900.5
   @angular-devkit/schematics    : 9.0.5
   @angular/cli                  : 9.0.5
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 1.5.0
   @capacitor/core : 1.5.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (1 plugins total)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.10.0
   ios-sim    : 8.0.2
   NodeJS     : v12.16.0 (/usr/local/bin/node)
   npm        : 6.13.4
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue? I am unable to reproduce the issue using the code snippet provided.

CodePen of ion-list: https://codepen.io/liamdebeasi/pen/LYVBVZb

[DwieDima]

@liamdebeasi i see your codepen is working.
I've just created a fresh project with "@ionic/angular": "^5.0.5" and was able to reproduce the bug.
Heres the repo.

--> when you serve the app, switch to iPad view using chrome browser:

• inspect
• toggle device toolbar
• select iPad
• refresh browser tab

[liamdebeasi]

Thanks for the follow up. I was able to reproduce the issue in my CodePen. It looks like this is related to https://github.com/ionic-team/ionic/issues/17425.

As a temporary workaround you can do the following to items in a list with lines="none" and "inset="true".

ion-list[inset=true][lines="none"] ion-item {
  --border-width: 0 !important;
}