Removing the white background in a modal form with rounded corners in Angular

Is there a way to remove the white background when opening a modal form with round corners?

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

This is the CSS code for the modal form:

.modal-msg {
  .modal-dialog {
    width: 25vw !important;
    max-width: 35vw !important;
  }

  .form-msg {
    box-shadow: -20px 20px 30px 0 rgba(0, 0, 0, 0.16); 
    background-image: linear-gradient(41deg, #40d2ea, #964ada 54%, #7d2abd 77%, #7c29bb 77%, #541b7e 91%);
    color: #fff;
    overflow: hidden;
    border-radius: 120px;
    background-radius: 120px;
        
    .modal-header {
      border: none;
      padding-bottom: 0 !important;
      justify-content: space-around;

      .close-icon {
        background-image: url('close.svg');
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: 10px;
        z-index: 100;

        &:focus {
          outline: none;
        }
      }

      .header {
        font-size: 33px;
        font-weight: 600;
      }
    }

    .modal-body {
      padding: 1rem 12%;
      
      .header {
        font-size: 33px;
        font-weight: 600;
        direction: rtl;
        margin-bottom: 1rem;
      }

      .form-control {
        color: #112d60;
        font-weight: 600;
        &:focus {
          border-color: #112d60 !important;
        }
      }
    }

    .background {
      width: 100%;
      position: relative;

      .circle {
        position: absolute;
      }
   }
  }
}

I've attempted to set the background to transparent and mess around with background-clip property, but it seems like I might be using it incorrectly or in the wrong order. Any advice would be greatly appreciated. Cheers!

The HTML code using this CSS is as follows:

<div class="form-msg">
    <div class="background">
        <div class="circle left-circle"></div>
        <div class="circle right-circle"></div>
    </div>
    <div class="modal-header">
        <button type="button" class="close" aria-label="Close" (click)="close()">
      <span aria-hidden="true">&times;</span>
    </button>
    </div>
    <div class="modal-body">
        <div class="row">
            <div class="col-12 text-center header">
                <span class="inspire-text">Inspiration Msg</span>
            </div>
        </div>      
    </div>
</div>

Answer №1

After much trial and error, I was able to solve the issue by heavily customizing the modal-content element

.modal-content{
    background-color: transparent;
    border:none !important;
}

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

The document.write function in JavaScript is malfunctioning

I've been attempting to utilize the javascript function document.write to incorporate an external css file in my template. However, I am aiming to achieve this using Twig, like so: document.write('<link href="{{ asset('bundles/activos/cs ...

Angular making sequential api calls

I have the following code where I am making one API call after another, with the second API call nested inside a subscribe. Is it possible to use mergeMap in this scenario to avoid multiple subscribe calls? Here is my current code: saveEmployees(empObje ...

Preventing navbar resizing on websites

I'm trying to have a section on the navbar dedicated for text or alerts that appear based on certain events. However, even when the alert is hidden, it still affects the height of the navbar. How can I resolve this issue? It may be difficult to see i ...

Tips for modifying layout and concealment of content when using window.print()

Currently, on my web application, the vendor is able to print the invoice using windows.print(). However, in the print preview, it displays a screenshot of the current page. The vendor has specific printed paper with their own details and some blank space ...

Showing json information in input area using Angular 10

I'm facing an issue with editing a form after pulling data from an API. The values I retrieve are all null, leading to undefined errors. What could be the problem here? Here's what I've tried so far: async ngOnInit(): Promise<void> ...

What is the best way to create a method that waits for a POST request to complete?

I have the following code snippet: login() { const body = JSON.stringify({ "usuario":"juanma", "password":"1234"}); console.log(body); let tokencito:string = '' const params = ne ...

The menu bar created from getJSON is not displaying the jQuery UI CSS styles as expected

I have been working on creating a jQueryUI menubar using JSON data. The JSON data is successfully being converted into valid HTML, but the menubar does not display with the desired styling. It appears as an unstyled unordered list rather than a styled menu ...

When utilized in a nested component, the service is found to be null

When developing a nested component, I encounter an issue where the injected service is null. How can I successfully use a service in a nested component? export class ActivityComponent implements OnInit { constructor( . . public accountServ ...

The HTML dropdown menu is malfunctioning

I've been struggling to create a website with a dropdown menu. Despite following various guides and searching for solutions, the menu is behaving strangely. I've tried numerous tactics, so some lines of code may be unnecessary. The submenu is ap ...

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

Aligning the .left position to make the border of a <div> synchronized

When working on my Jquery program, I encountered an issue with borders not aligning properly within the container. Specifically, in the execution (where the container is represented by a white box), the left border extends beyond the position().left proper ...

Creating aesthetically pleasing class names using SASS and CSS modules

I'm in the midst of working on a Next.js project and experimenting with SCSS/SASS for my styling needs. I'm currently grappling with how to streamline the process of applying class names. Here's the issue at hand: Within one of my componen ...

Node.js route error: no script MIME types allowed with 'X-Content-Type: nosniff' header present

I'm facing an issue where my css and js files do not load on the second route, but they work perfectly fine on the first route. Could someone explain why this discrepancy occurs? // ********************** INDEX PAGE ******************************* ...

Angular 5 browser console displaying a communication from the server

I recently encountered an issue in Angular5 while trying to log into my account. Whenever there is a wrong password error, it displays a message in the browser console indicating server error 500. However, I do not want this message to be shown in the brow ...

When navigating through a scrollable inner element, the selected menu options do not remain anchored to the parent element

When navigating through a nested element, the dropdown menu options do not move along with the page; instead, they remain fixed in position Basic HTML Layout Scrolling Behavior of Inner Element Below is the code snippet for app.component: import { ...

How can you customize gutter widths for specific rows in Bootstrap 3?

Currently, I am constructing my own website using Bootstrap 3 and have come across a challenge that I would like to address: My goal is to assign distinctive gutter widths to certain rows in my design. The remaining sections of the site will adhere to th ...

Version 3 of Source Maps and CSS compilation/compression

Is there a tool available that can compress, minify, and combine CSS files while generating a valid v3 SourceMap compatible with Chrome? Ideally, I am looking for a NodeJS tool. From my research, some Node compressors like clean-css, csso, css-condense (w ...

Begin by executing the angular repository on your local machine

Is it possible to run the Angular repository found on GitHub at github.com/angular/angular locally through localhost? The README for the repository does not offer any guidance on running it locally. Running 'yarn' will build the site, but how do ...

In Angular 2, is one-way data binding truly one-way for objects that are passed?

Essentially, passing an object (rather than a primitive) to a component's @input one-way data binding creates a two-way data binding. Any modifications to "bar" within my-component will automatically update the parent component's bar property. W ...

Issues with the linear-gradient feature in Ionic3 are preventing it from properly functioning

I'm currently experimenting with creating a unique gradient color in my Ionic3 variable.sass file. $colors: ( primary: #4471C1, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222, newcolor: linear-gradient( ...