ionic-team / ionic-team/ionic-framework

feat: ion-list on ios should have top and bottom borders

Open
#21,656 2 comments 0 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Bug Report

**Ionic version:**

[ ] **4.x**
[x] **5.x**

**Current behavior:**

In native IOS apps there are two full lines on top and bottom of a list. In Ionic the top line is completely missing and bottom line is inset.

### Native IOS list

### Ionic list

**Expected behavior:**

Without providing any attributes to ion-list and ion-item, the default list should look like in first screenshot:
- line on top and bottom of a list is full
- item lines are inset

**Steps to reproduce:**

**Related code:**

Just copy paste this snippet to latest Ionic version.

```



example@mail.net

25



```

***My current workaround***

### .html

```





example@mail.net
25




```

### .css

```
.ios-list {
border: solid;
border-color: var(
--ion-item-border-color,
var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))
);
border-width: 0.55px 0px 0.55px 0px;
}
```
**Ionic info:**

```
Ionic:

Ionic CLI : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 8.3.26
@angular/cli : 9.1.7
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.0.1
@capacitor/core : 2.0.1

Utility:

cordova-res (update available: 0.15.1) : 0.14.0
native-run : not installed

System:

NodeJS : v12.16.0 (/usr/local/bin/node)
npm : 6.14.5
OS : macOS Catalina
```

Contributor guide

Open the contributing guide

Research direction

Start with the provided ion-list and ion-item snippet in an iOS-mode Ionic 5 app and compare its top and bottom borders with the screenshots. Done means the default list has full-width top and bottom borders while item separators remain inset, without the reported workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.