The Background of an Ionic 4 Modal

I am currently working on improving the appearance of my modal when it is displayed.

When the screen size is large, there is a translucent backdrop that is caused by the min-height css. While I do not have an issue with the min height itself, I would like the entire background to be white.

The modal is created in the usual way and then presented using the following code:

this.modalCtrl.create({
  component: AddCommentPage,
  componentProps: { id: this.place.id }
}).then((element) => element.present());

Here is how the modal looks when the screen is large:

https://i.sstatic.net/njAhQ.png

And this is how it appears when the screen is small (it should be full screen):

https://i.sstatic.net/ZoJbG.png

Answer №1

To solve the issue, I included the given snippet to my .scss file:

  .modal-wrapper {
    background-color: white;
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for customizing cursor within a CSS ::first-letter selector

My site's mouse cursor has not been customized in any way, so it is all default. When text is hovered over, the cursor changes into the "text select cursor" (ꕯ). However, after styling my first letters by changing their color, I noticed that they no ...

Code for Rotating the Wheel - MINUS javascript

Exploring the possibility of creating a spin the wheel effect like this using only HTML and CSS, no Javascript involved Seeking references or examples to determine feasibility. ...

Apply a specific class to the input field when the name matches x

I have a website that loads a JavaScript file from a commercial service, so I am unable to customize this file. The output of this JavaScript file is a form with various input fields, all of which have the class name "wf-input". I now want to add a jQuery ...

What is the process for disabling dependency injection in an Angular component?

My Angular component serves as a superclass and is never instantiated on its own. There are multiple components that extend this one, each operating on different data types, so the superclass utilizes generic typing. In addition to this, the superclass mu ...

Guide on triggering CSS @keyframes animations upon element visibility while scrolling

I'm struggling with controlling CSS animations that I want to start only when the element becomes visible on the screen. The issue arises because I have a website with a total height of around 8000px and the element with the animation is located far d ...

Tips for selecting elements within the overflow container that are hidden:scroll

Is it feasible to fetch all elements located within the "hidden area" of a parent element that has an overflow:scroll property? A parent container, <div>, has a style of overflow:scroll;height:200px. Within this container is a table. Take a look at ...

What is preventing this code from successfully altering the opacity of an element based on its id?

I'm curious as to why the element's opacity is not temporarily reduced when the corresponding button is pressed. Any assistance would be greatly appreciated. function pause(miliseconds) { var currentTime = new Date().getTime(); while (cur ...

Is there a way to convert the structure of HTML/CSS into JSON format?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #004c97; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text ...

Animate the transformation of a singular property (scale) while neglecting the modification of another (translate)

The issue at hand is the complexity of the transform property, which includes various parts like translate, scale, and more. This is a conceptual query concerning an element, such as .loader, which has transform: translate(10px, 10px) and requires animati ...

Utilize Typescript to Invoke Functions of Different Components in Angular 2

Hello everyone, I am a newcomer to Angular 2 and I'm looking to utilize the value of one component in another component. This will help me populate data based on that particular value. In my setup, I have three Components - App.Component, Category.Co ...

Can anyone figure out why this code is not functioning properly? It seems to be targeting the body element and all of

Currently, I am utilizing jqtouch to create a mobile website. In addition to this, I am incorporating a gallery image slider into the website. However, I have encountered an issue where the images do not display when placed between <div id="project_name ...

Sorting in an Angular mat table can be customized to consider two properties within a single

Trying to implement a table with MatSort, I've encountered an issue where every column sorts except for the third one: <ng-container matColumnDef="nbreEnregistrementTotal"> <th mat-header-cell *matHeaderCellDef mat-sort-header ...

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: https://i.sstatic.net/Qumru.png Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class conta ...

Ways to verify and incorporate https:// in a URL for a MEAN Stack application

When extracting the URL from API data, my code looks like this: <div class="row copy-text"> <a href="{{copy.Url}}" target="_blank" style="text-decoration: underline !important;">{{copy.Title}}</a> </div> I am interested in ve ...

Customize printing options by hiding the print button

I am looking to exclude the print button from a hard copy when it is printed. <html> <head> <title>New Page 1</title> </head> <body> <p> This is just a paragraph, and I do not want t ...

Disorganized HTML Elements

If you visit diartefloral.tech and use a cellphone in the "Sobre Nosotros" section of the menu, the footer overlaps an image. I'm not sure how to fix this issue. The most relevant code is shown below; I am using Bootstrap. Previously, I had an issue w ...

Divide the width by half in a CSS grid layout with 3 columns

Is it possible to replicate the layout shown in the image using CSS grid? https://i.sstatic.net/XSoE8.png ...

Creating a HTML and JavaScript carousel without relying on the animate function

I am currently facing some challenges with building a custom slider. While it moves forward smoothly using CSS animation, I'm struggling to implement a backward motion with an animation. It seems like I need to loop through the slides and try a differ ...

How to efficiently trigger service functions in Angular2 with @ngrx/store/effects?

Currently, I am working on developing an Angular 2 application using @ngrx/store and @ngrx/effects. However, I am facing challenges in determining the appropriate placement of logic outside of actions/effects and when to invoke service functions. For inst ...

The login feature seems to be experiencing difficulties with navigation, and I suspect that the problem lies within the .js script and its positioning in the program

The sign-in program seems to be having trouble navigating properly. I suspect the issue lies within the .js code and its placement. The layout consists of a title, two text input boxes, and two buttons that are not functioning correctly (the main issue). A ...