Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 (cordova-lib@9.0.1)
   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

Issue Analytics

State:
Created 4 years ago
Comments:5 (4 by maintainers)

Top GitHub Comments

2reactions

liamdebeasicommented, Apr 1, 2020

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

0reactions

ausminternetcommented, Nov 14, 2022

workaround for inset with lines="inset":

ion-list[inset='true'][lines='inset'] ion-item:not(:last-of-type) {
  --border-width: 0 !important;
  --inner-border-width: 0 0 0.55px 0;
}

Top Results From Across the Web

bug: ion-list attribute "lines" not working when ... - GitHub

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 - Ionic Framework

ion-item elements for iOS/Android contain text, icons, images, and other custom elements. They're placed in a list and can be input, deleted, edited, ......

My ion-list won't show the last item in the list when I scroll to ...

I had got the same issue that I resolved adding an empty item at the end of the list with the attribute: lines="none"...

CSS Z-Index Not Working? How to Fix It Using Stack Order

So in this post, I'm going to explain what the z-index property is, what stacking order is, and how to use them in...

A List of Common CSS Utility Attributes in Ionic 2 | Josh Morony

Utility attributes are those little attributes you can add to HTML elements in Ionic 2 like ion-button , no-lines , and icon-only ....