Skip to content

Margins on Page affects UI and breaks it on iOS #6318

@MartoYankov

Description

@MartoYankov

Which platform(s) does your issue occur on?

iOS/Android/Both

Please provide the following version numbers that your issue occurs with:

  • CLI: 4.2.0
  • Cross-platform modules: 4.2.0
  • Runtime(s): 4.2.0

Please tell us how to recreate the issue in as much detail as possible.

Since {N} 4.0 setting margins, padding and size to a Page results in undefined/different behavior on both platforms. The reason is that on iOS we let the system lay out pages and these properties are ignored. However, they still take part in measure and affect the nested UI.

Proposed Solution: I think the correct behavior is to ignore these properties on the Page component and warn the user they will not take effect.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Can be reproduced with this playground:
https://play.nativescript.org/?template=play-tsc&id=l4geyI&v=3

The code that is important is:

Page {
    margin: 100;
}

ScrollView {
    margin: 10;
}

On Android it looks correct-ish. On iOS the Page margin is applied on the ScrollView and the ScrollView margin is lost.


Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions