Search code examples
cssangularionic-frameworkionic-native

Child component doesn't cover whole page

I want to make a background overlay within a child component. But even if I put the position on absolute it does not cover the whole page.

This is what I do in the css of my child component:

#background-overlay{
  position: absolute !important;
  display: block !important;
  background-color: rgba(0, 0, 0, 0.5);
  padding:0;
  margin:0;

  top:0;
  left:0;

  width: 100vh;
  height: 100vw;
}

Stackblitz example: https://stackblitz.com/edit/angular-rjiujw

Solution

  • The height and width are switched, they should be:

    width: 100vw;
height: 100vh;