CODEWITHSUNDEEP
angularjstypescriptnativescriptangular2-nativescript
Stephen
Stephen

Reputation: 10079

Custom dialog(Modal Dialog) should display half of the screen in nativescript angular2

I referred this link and this link

when click on the floating action button, I'm using custom modal dialog to show the listview to half of the screen.

But it is taking full screen like below image:

enter image description here

I tried to set boolean variable fullScreen to false then also its showing full screen only.

ts file:

 public showModal() {

     console.log("showmod", "Test");

     let options = {
         context: {},
         fullscreen: false,
         viewContainerRef: this.vcRef
     };
     this.modal.showModal(ModalComponent, options).then(res => {
         console.log("ModRes :", ""+res);
     });
 }

dialogs.d.ts: (node-modules/nativescript-angular/directives)

import { ViewContainerRef, Type } from "@angular/core";
export interface ModalDialogOptions {
    context?: any;
    fullscreen?: boolean;
    viewContainerRef?: ViewContainerRef;
}
export declare class ModalDialogParams {
    context: any;
    closeCallback: (...args) => any;
    constructor(context: any, closeCallback: (...args) => any);
}
export declare class ModalDialogService {

    showModal(type: Type<any>, options: ModalDialogOptions): Promise<any>;
    private static showDialog(type, options, doneCallback, containerRef, resolver, parentPage, pageFactory);
}
export declare class ModalDialogHost {
    constructor();
}

Any help is appreciated.thanks.

Upvotes: 1

Views: 1550

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

This is the native behavior on iOS.

By design on iPhone, a modal page appears only in fullscreen.

Noted here

Upvotes: 1

Related Questions