NativeScript / NativeScript/android
margin CSS not working as expected on android
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 563
- Forks
- 144
- Ø Merge
- 10 Std. 46 Min.
- Gemergte PRs (30 T.)
- 14
Beschreibung
Environment
OS: macOS 14.4.1
CPU: (10) arm64 Apple M1 Pro
Shell: /bin/zsh
node: 20.11.1
npm: 10.2.4
nativescript: 8.6.5
# android
java: 11.0.22
ndk: Not Found
apis: Not Found
build_tools: Not Found
system_images: Not Found
# ios
xcode: 15.3/15E204a
cocoapods: 1.15.2
python: 3.12.2
python3: 3.12.2
ruby: 2.7.8
platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Dependencies
"dependencies": {
"@angular/animations": "17.3.2",
"@angular/common": "17.3.2",
"@angular/compiler": "17.3.2",
"@angular/core": "17.3.2",
"@angular/forms": "17.3.2",
"@angular/platform-browser": "17.3.2",
"@angular/platform-browser-dynamic": "17.3.2",
"@angular/router": "17.3.2",
"@apollo/client": "3.9.9",
"@mnd/external-web-view": "file:../app-plugins/dist/packages/external-web-view/mnd-external-web-view-1.0.1.tgz",
"@nativescript/angular": "17.0.0",
"@nativescript/core": "8.6.2",
"@nativescript/iqkeyboardmanager": "2.1.1",
"@nativescript/localize": "5.2.0",
"@nativescript/mlkit-barcode-scanning": "2.1.0",
"@nativescript/mlkit-core": "2.1.0",
"@nativescript/secure-storage": "3.0.3",
"@nativescript/theme": "3.0.2",
"@nativescript/ui-charts": "0.2.4",
"apollo-angular": "6.0.0",
"apollo3-cache-persist": "0.15.0",
"d3-ease": "3.0.1",
"graphql": "16.8.1",
"graphql-tag": "2.12.6",
"intl": "1.2.5",
"moment": "2.30.1",
"nativescript-health-data": "file:../app-plugins-customized/nativescript-health-data/publish/package/nativescript-health-data-2.0.0.tgz",
"nativescript-oauth2-ext": "file:../app-plugins-customized/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.3.tgz",
"nativescript-sqlite": "2.8.6",
"nativescript-sqlite-commercial": "file:../app-plugins-customized/commercial-sqlite/nativescript-sqlite-commercial-1.8.0.tgz",
"nativescript-sqlite-encrypted": "file:../app-plugins-customized/commercial-sqlite/nativescript-sqlite-encrypted-1.6.0.tgz",
"nativescript-ui-calendar": "15.2.3",
"nativescript-ui-gauge": "15.2.3",
"qs": "npm:querystring@0.2.1",
"rxjs": "7.8.1",
"util": "0.12.5",
"uuidjs": "5.0.1",
"zone.js": "0.14.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "17.3.2",
"@angular/compiler-cli": "17.3.2",
"@graphql-codegen/cli": "5.0.2",
"@graphql-codegen/fragment-matcher": "5.0.2",
"@graphql-codegen/introspection": "4.0.3",
"@graphql-codegen/typescript": "4.0.6",
"@graphql-codegen/typescript-apollo-angular": "4.0.0",
"@graphql-codegen/typescript-operations": "4.2.0",
"@nativescript/android": "8.6.2",
"@nativescript/ios": "8.6.4",
"@nativescript/types": "8.6.1",
"@nativescript/webpack": "5.0.18",
"@ngtools/webpack": "17.3.2",
"@types/d3-ease": "3.0.2",
"@types/intl": "1.2.2",
"@types/lodash": "4.17.0",
"@types/node": "20.12.2",
"keycloak-request-token": "0.1.0",
"rimraf": "5.0.5",
"sass": "1.72.0",
"ts-node": "10.9.2",
"typescript": "5.2.2"
}
Describe the bug
It seems like when setting margin with a css class on Android the syntax of margin: 0 0 0 0; is not adequately merged as it does not overwrite margin-left margin-right margin-top margin-bottom like on iOS plattform.
To Reproduce
.zero {
margin: 0 0 0 0;
padding: 0 0 0 0;
margin-right: 0; //bugfix for android
margin-left: 0 // bugfix for android
}
Expected behavior
margins set via margin overwrite margin-left, margin-right, margin-top, margin-bottom
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, das .zero-CSS-Beispiel auf Android zu reproduzieren, und vergleiche sein Randverhalten mit iOS. Verfolge, wie die Kurzschreibweise margin: 0 0 0 0 angewendet wird, und überprüfe, dass die abgeschlossene Änderung sie alle vier seitenbezogenen Ränder überschreiben lässt, ohne separate Deklarationen für margin-left und margin-right zu erfordern.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- android, css
- Bereich
- mobile-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100