CODEWITHSUNDEEP
htmlcssangularangular5
Felipe Micali
Felipe Micali

Reputation: 847

Angular 5 fixed positioned div in nested component as background mask

In my angular 5 application I have nested router-outlets with multiple children paths/components. In some of my children routes I have to call an API and while I wait for an answer I want to display a background (mask) that covers the whole application and displays some warning/state for the user, and for that I'm using a fixed positioned div with the following class:

.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 500;
  background-color: rgba(0,0,0,0.7)
}

The thing is that this router-outlet coexists whit another component that creates the navbar and a left-side menu:

<app-internal-navbar></app-internal-navbar>

<div class="app-container">
  <router-outlet></router-outlet>
</div>

When I create the mask element inside one of my router-outlet paths or children paths, this element won't hide the whole application, covering only the router-outlet container. It seems to be absolute-positioned in reference to the router-outlet element, and not to the whole window.

What could I do to make these nested mask elements cover the whole application without moving them to another components?

Thanks!

Upvotes: 2

Views: 3797

Answers (2)

Felipe Micali
Felipe Micali

Reputation: 847

I've discovered that the following styles in a parent component was causing this trouble:

.app-container {
  transition: 0.4s;
  transform: translateX(250px);
  will-change: transform;
  width: calc(100% - 250px);
  @media (max-width: 800px) {
    transform: translateX(0);
    width: 100%;
  }
}

For some reason the transform property combined with will-change: transform makes a children fixed positioned element not fixed at all. It seems to be a bug in chrome, so I'll have to find a workaround for this using margins instead of transformations...

Upvotes: 0

Ganesh Pilli
Ganesh Pilli

Reputation: 136

This can be achieved with simple CSS:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .main{
        height: 300px;
        background-color: blue;
        position: relative;
        color: blanchedalmond;
    }
    .pop-up{
        position: absolute;
        z-index: 10;
        background-color: rgba(0,0,0, 0.9);
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    </style>
</head>
<body>
    <div class="main">
        <h1>Sample</h1>
        asdfasdfasd 
        asdfasdfasdf
        asdf
        asdf
        asdf
        asdf
        <div id="popup" class="pop-up">
            <button onclick="document.getElementById('popup').style.display='none'">CLOSE</button>
        </div>
    </div>
    
</body>
</html>

Upvotes: 0

Related Questions