Skip to content

Android non-fullscreen modal layout issues #11139

@felixkrautschuk

Description

@felixkrautschuk

Issue Description

I found some layout issues on Android modal dialogs (fullscreen: false). They occur since @nativescript/core 9.0.13+.

<Page showingModally="onPageShowingModally">
    <GridLayout rows="auto,*,auto">
        <Label row="0" text="Title" className="modal-title"/>
        <ScrollView row="1">
            <GridLayout rows="auto,*" padding="15">
                <TextField row="0" hint="Enter some text..." />
                <Label row="1" text="{{ longText }}" textWrap="true"/>
            </GridLayout>
        </ScrollView>

        <GridLayout row="2" columns="auto,auto" className="modal-actions-container">
            <Button col="0" text="Cancel" tap="cancelModalPage" className="btn-modal-action"/>
            <Button col="1" text="Confirm" tap="confirmModalPage" className="btn-modal-action"/>
        </GridLayout>
    </GridLayout>
</Page>

This is how the modal should look like (and how it looks like on nativescript/core 9.0.12):
Image

This is how it behaves on core 9.0.13+:
https://github.com/user-attachments/assets/ca5e7c8a-d8e5-48d4-820e-ca15002acef0

The buttons at the bottom of the Page are missing, until I rotate the device or open the keyboard of the TextField (then the padding is still not correct, but the buttons are visible at least)

The issue seems to be caused by this change between 9.0.12 and 9.0.13:
https://github.com/NativeScript/NativeScript/pull/11058/changes#diff-6e2aeb3f1b4d4fb9354519de09689dbb6a0a78cc719e1dff37e0d5a4b5d33b5fR270

Reproduction

ns9test.zip

Build and run the app
Tap the "show modal" button -> Buttons on the bottom are missing
rotate the device to landscape and back -> Buttons are visible (still with wrong padding)

Relevant log output (if applicable)

Environment

OS: macOS 26.3.1
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Shell: /bin/zsh
node: 22.19.0
npm: 11.6.2
nativescript: 9.0.5

# android
java: 17.0.11
ndk: Not Found
apis: 29, 35, 36, 36
build_tools: 25.0.2, 27.0.3, 28.0.3, 29.0.2, 30.0.2, 30.0.3, 32.0.0, 33.0.0, 33.0.1, 33.0.2, 34.0.0, 35.0.0, 35.0.1, 36.0.0, 36.1.0
system_images: 
  - android-28 | Google Play Intel x86_64 Atom
  - android-29 | Google Play Intel x86_64 Atom
  - android-30 | Intel x86_64 Atom
  - android-35 | Google Play Intel x86_64 Atom
  - android-35 | Google Play Tablet Intel x86_64 Atom
  - android-36.1 | Google Play Intel x86_64 Atom
  - android-36.1 | Pre-Release 16 KB Page Size Google Play Intel x86_64 Atom

# ios
xcode: 26.3/17C529
cocoapods: 1.16.2
python: 2.7.18
python3: 3.13.0
ruby: 2.6.10
platforms: 
  - DriverKit 25.2
  - iOS 26.2
  - macOS 26.2
  - tvOS 26.2
  - visionOS 26.2
  - watchOS 26.2

Dependencies

"dependencies": {
  "@nativescript/core": "^9.0.17"
},
"devDependencies": {
  "@nativescript/android": "^9.0.2",
  "@nativescript/ios": "^9.0.3",
  "@nativescript/webpack": "^5.0.31"
}

Please accept these terms

Metadata

Metadata

Assignees

No one assigned

    Labels

    bug-pending-triageReported bug, pending triage to confirm.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions