Ionic 4 Modal Backdrop

up vote
-1
down vote

favorite

I'm attempting to fix the way my modal works when presented.

When the screen size is large it has a translucent backdrop due to the min-height css. I don't mind that min height, I just want it all to be white.

It is created normally then presented:

this.modalCtrl.create({

  component: AddCommentPage,

  componentProps: { id: this.place.id }

}).then((element) => element.present());

Here is a view when the screen is large:

Large Image

And when it is small (should be full screen):

Small Image

edited Nov 19 at 2:40

asked Nov 19 at 0:41

Diesel

614920

add a comment |

up vote
-1
down vote

favorite

I'm attempting to fix the way my modal works when presented.

When the screen size is large it has a translucent backdrop due to the min-height css. I don't mind that min height, I just want it all to be white.

It is created normally then presented:

this.modalCtrl.create({

  component: AddCommentPage,

  componentProps: { id: this.place.id }

}).then((element) => element.present());

Here is a view when the screen is large:

Large Image

And when it is small (should be full screen):

Small Image

edited Nov 19 at 2:40

asked Nov 19 at 0:41

Diesel

614920

add a comment |

up vote
-1
down vote

favorite

I'm attempting to fix the way my modal works when presented.

When the screen size is large it has a translucent backdrop due to the min-height css. I don't mind that min height, I just want it all to be white.

It is created normally then presented:

this.modalCtrl.create({

  component: AddCommentPage,

  componentProps: { id: this.place.id }

}).then((element) => element.present());

Here is a view when the screen is large:

Large Image

And when it is small (should be full screen):

Small Image

edited Nov 19 at 2:40

asked Nov 19 at 0:41

Diesel

614920

I'm attempting to fix the way my modal works when presented.

When the screen size is large it has a translucent backdrop due to the min-height css. I don't mind that min height, I just want it all to be white.

It is created normally then presented:

this.modalCtrl.create({

  component: AddCommentPage,

  componentProps: { id: this.place.id }

}).then((element) => element.present());

Here is a view when the screen is large:

Large Image

And when it is small (should be full screen):

Small Image

css angular ionic-framework

edited Nov 19 at 2:40

asked Nov 19 at 0:41

Diesel

614920

edited Nov 19 at 2:40

asked Nov 19 at 0:41

Diesel

614920

edited Nov 19 at 2:40

asked Nov 19 at 0:41

Diesel

614920

asked Nov 19 at 0:41

Diesel

614920

asked Nov 19 at 0:41

Diesel

614920

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

I fixed it by adding the following code into my .scss file:

  .modal-wrapper {

    background-color: white;

  }

answered Nov 24 at 23:13

Diesel

614920

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53366942%2fionic-4-modal-backdrop%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

I fixed it by adding the following code into my .scss file:

  .modal-wrapper {

    background-color: white;

  }

answered Nov 24 at 23:13

Diesel

614920

add a comment |

up vote
0
down vote

I fixed it by adding the following code into my .scss file:

  .modal-wrapper {

    background-color: white;

  }

answered Nov 24 at 23:13

Diesel

614920

add a comment |

up vote
0
down vote

I fixed it by adding the following code into my .scss file:

  .modal-wrapper {

    background-color: white;

  }

answered Nov 24 at 23:13

Diesel

614920

I fixed it by adding the following code into my .scss file:

  .modal-wrapper {

    background-color: white;

  }

answered Nov 24 at 23:13

Diesel

614920

answered Nov 24 at 23:13

Diesel

614920

answered Nov 24 at 23:13

Diesel

614920

answered Nov 24 at 23:13

Diesel

614920

add a comment |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr