How to set Background Color to Modal Page


#1

Hi there, I am trying to set to transparent the background color in a modal page I use for pick an element from a list, I would like to be able whats behind the modal window. I have tried background-color but it is not working. This is how I open it:

public showModal() {
    let params = {
        items: this.selectItems,
        title: this.title
    }
    let options = {
        context: params,
        fullscreen: false,
        viewContainerRef: this.vcRef
    };

    this.modal.showModal(SelectWidgetModalComponent, options)
    .then(res => {
        if (res) {
            this.selectedItem = res;
            this.onChange.emit(res);
        }
    });
}

Check the image attached.

Any help please?

Thanks!


#2

I think its need to work fine with backgroundcolor.

Did you tried as set the backgroundcolor with root StackLayout/other layout of the modal page?

<StackLayout width="210" height="210" backgroundColor="lightgray">
.
.
.
.
</StackLayout>

Can you share your tried code?


#3

Hi @kumaran , I set the Page css in the Constructor of the Component, something like this:

this.page.className = "modal-page";

This is the CSS code corresponding to that className:

.modal-page {
    width: 250;
    height: 450;
    background-color: transparent;
    border-radius: 10;
}

I need to set the backgroundColor of the outside area of the modal page, which is showing WHITE as the image in the first post.

Any idea?


#4

Hey @relez take a look at mentioned links,

This may give some deep idea on this topic.


#5

Hi again, I am using NativeScript+Angular, those examples are using Nativescript Core, thats I am having this trouble, seems like additional code is required or something is wrong.


#6

Hi @relez
I noticed this a few days ago as well.
That you can’t set a transparent background on a {N} modal page.
Sad but true…

What I tried was to set the background color to rgba(0,0,0,0.4) , but it simply showed a solid color.


#7

Hi @multishiv19, thanks for your answer, this weird behavior is only on iOS, Android is working fine. Is there any way to notify this issue to the development team and let them know?

Thanks!


#8

@relez
try creating an issue here


#9

Thanks @multishiv19, a question has been posted and lets see if they fix it. Thanks for your effort!