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

bug: ion-list inset removes first item underline #19507

Closed
BugsBunnyBR opened this issue Sep 30, 2019 · 4 comments

Comments

@BugsBunnyBR
Copy link

commented Sep 30, 2019

Bug Report

when using with ion-inputs, the first input has its underline removed.
Ionic version:
[x] 4.10

Current behavior:
The first input has no underline
Captura de Tela 2019-09-30 às 17 25 40

Expected behavior:
All inputs to have underline.

Related code:

<ion-list inset name="fields">
        <ion-item>
            <ion-label 
              position="stacked" 
              color="primary"> First field
            </ion-label>
            <ion-input
              [(ngModel)]="first"
              type="number"
              name="first"
              required>
            </ion-input>
        </ion-item>
        <ion-item>
            <ion-label 
              position="stacked" 
              color="primary"> Second field
            </ion-label>
            <ion-input
              [(ngModel)]="second"
              type="number"
              name="second"
              required>
            </ion-input>
        </ion-item>
</ion-list>
ionic info

Ionic:

   Ionic CLI                     : 5.4.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.10.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8 

System:

   Android SDK Tools : 26.1.1 (/Users/juliocotta/Library/Android/sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v10.16.0 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 11.0 Build version 11A420a


@ionitron-bot ionitron-bot bot added the triage label Sep 30, 2019
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Oct 1, 2019

Thanks for the issue. Is this issue in regards to inset ion-lists? I noticed your code example does not use an inset ion-list, but the title of your issue refers to one.

@ionitron-bot ionitron-bot bot removed the triage label Oct 1, 2019
@BugsBunnyBR

This comment has been minimized.

Copy link
Author

commented Oct 1, 2019

Thanks for the issue. Is this issue in regards to inset ion-lists? I noticed your code example does not use an inset ion-list, but the title of your issue refers to one.

I am sorry, I couldn't share the actual code, so I tried to put that as example. I updated the sample.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply labels Oct 1, 2019
@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Oct 2, 2019

Thanks for the follow up. I was able to reproduce this issue after I added a few more inputs. Looks like the issue is here: https://github.com/ionic-team/ionic/blob/master/core/src/components/list/list.md.scss#L29

With inset lists, the top border of the first item and the bottom border of the last item are supposed to be removed, but this CSS removed all borders from the items.

@liamdebeasi

This comment has been minimized.

Copy link
Member

commented Oct 2, 2019

This issue has been fixed and will be available in the next release of Ionic. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.