ionic-team / ionic-team/ionic-framework

bug: The ion-no-padding class is not overriding the ion-list padding

Open
#30,521 4 comments 3 reactions 0 assignees View on GitHub
package: core type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 14h
Merged PRs (30d)
50

Description

### Prerequisites

- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

The ion-no-padding class is not overriding the ion-list padding

![Image](https://github.com/user-attachments/assets/6dd62a05-7849-41ff-98e5-df896a840c43)

### Expected Behavior

When setting the class ion-no-padding it should not have padding.

### Steps to Reproduce

See the CSS in the example: https://stackblitz.com/edit/wdmx2ux4?file=src%2Fapp%2Fexample.component.html

### Code Reproduction URL

https://stackblitz.com/edit/wdmx2ux4?file=src%2Fapp%2Fexample.component.html

### Ionic Info

```
Ionic:

Ionic CLI : 7.2.1
Ionic Framework : @ionic/angular 8.6.2
@angular-devkit/build-angular : not installed
@angular-devkit/schematics : 19.2.14
@angular/cli : 20.0.4
@ionic/angular-toolkit : 12.2.0

Capacitor:

Capacitor CLI : 7.4.0
@capacitor/android : 7.4.0
@capacitor/core : 7.4.0
@capacitor/ios : not installed

Utility:

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

System:

NodeJS : v22.13.1
npm : 11.4.2
OS : Windows 10
```

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Open the linked StackBlitz reproduction and start with src/app/example.component.html, then inspect the computed styles for ion-list and ion-no-padding. Confirm the conflicting padding rule and verify that the reproduction shows no padding when the class is applied.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, css, typescript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.