bug: Item with Outline does not display properly when inside a List

[RobertWeaver]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

Using an Item component inside a List with the fill set to Outline is rendered with a partial border.

Expected Behavior

The Item should display with the complete border when used with or without a List

Steps to Reproduce

Use the code below inside of an Ionic Application.

      <ion-list lines="full">
        <ion-item fill="outline" mode="md">
          <ion-label position="floating">Ion Item Outline with List</ion-label>
          <ion-input value=""></ion-input>
          <ion-note slot="helper">Helper Text</ion-note>
          <ion-note slot="error">Error Text</ion-note>
        </ion-item>
      </ion-list>

Code Reproduction URL

https://codesandbox.io/s/ion-item-with-outline-display-error-idyy8f

Ionic Info

Using custom elements version of Ionic.

Additional Information

I believe this CSS is overriding the Outline border-width css. If I uncheck it then the .item-fill-outline will be used and then display correctly.

[sean-perkins]

Hello @RobertWeaver thanks for reporting this issue.

I do see the visual inconsistencies you are reporting. Unfortunately Material design does not reference an exact implementation for multiple outlined controls in a list (they apply outline style at the text field level, we are doing it at the item level)

We will likely have to avoid the style override and introduce additional spacing between items, as just applying the border style causes visual crowding between multiple outline items with helper text.

We'll capture as a bug and prioritize, thanks!

[liamdebeasi]

Thanks for the report. In Ionic 7 we are introducing a new syntax for working with ion-input. As part of this, we moved the filled/outline styles to the input itself. We also released new guidance on how to use these outline/filled styles. When using outline/filled styles, inputs should not be used inside of an ion-item. The reason is that outline/filled inputs visually define the input container, so adding them into an item (which also defines the container) is not necessary. See https://ionicframework.com/docs/v7/api/input#filled-inputs for more information.

Ionic 7 is currently in beta, and developers can find a migration guide on our documentation website: https://ionicframework.com/docs/v7/updating/7-0

I am going to close this thread, but let me know if there are any questions.

[ionitron-bot]

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.