css: absolute positioned div having a wrong size in a parent

user_479770 0
Viewed 61

I'm trying to put an image (sprite-sheet actually) inside a css-grid.
In order to be able to css-animate the sprite-sheet, I have to define its position as 'absolute'. I managed to duplicate my problem in a very simple code:

first I have a sprite-sheet component that holds the sprite-sheet and compo-image component that should mock another component that holds this sprite-sheet

sprite-sheet.component.ts:

import { Component } from '@angular/core';

    @Component({
      selector: 'sprite-sheet',
      styleUrls: ['./sprite-sheet.component.scss'],
      templateUrl: './sprite-sheet.component.html',
    })
    export class SpriteSheetComponent {
      constructor() {
      }
    }

sprite-sheet.component.html

<div></div>

sprite-sheet.component.css

:host {
  height: 100%;
  width: 100%;
}

div
{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background-repeat: no-repeat !important;
  background-position-x: 0%;
  background-image: url('/assets/icon/favicon.png')
}

component-with-image.ts

import { Component } from "@angular/core";

@Component({
    selector: 'compo-image',
    templateUrl: `./component-with-image.html`,
    styleUrls: ['./component-with-image.css']
})
export class ComponentWithImage {
}

component-with-image.html

component-with-image.css

div {
    height: 100%;
    width: 100%;
}

Then I tried to display this image in my app:

component-with-image.html

<div>
  some-text
</div>
<div> <!-- should be a css grid -->
  <compo-image></compo-image>
</div>

app.component.css

div {
    width: 100px;
    height: 100px;
}

compo-image {
    width: 100%;
    height: 100%;
}

But this is what I got: enter image description here

cool, this happened because my absolute positioned image was relative to the root component because I didn't specify positions to the other components.

So I added a wrapper component called sprite-sheet2 to have a 'relative' position and host the real sprite-sheet component.

sprite-sheet.component2.ts

import { Component } from '@angular/core';

@Component({
  selector: 'sprite-sheet2',
  styleUrls: ['./sprite-sheet.component2.scss'],
  templateUrl: './sprite-sheet.component2.html',
})
export class SpriteSheetComponent2 {
  constructor() {
  }
}

sprite-sheet.component2.ts

:host {
    position: relative;
    height: 100%;
    width: 100%;
}

sprite-sheet {
    height: 100%;
    width: 100%;
}

sprite-sheet2.component2.html

<sprite-sheet></sprite-sheet>

But then I get this: enter image description here

Everything above sprite-sheet2 have defined width and height but sprite-sheet2 and everything it contains have 0x0 size, even though these components have a width and height = 100%.

What am I doing wrong?

angular css html
1 Answers

Angular components host don't have default display display:block therefore you need to assign it yourself.

:host {
    display: block; // or anything else
    position: relative;
    height: 100%;
    width: 100%;
}

but you can set the setting in angular.json to assign default display for new components generated with ng g c XXXX command.

"schematics": {
    "@schematics/angular:component": {
      "displayBlock": true
   }
 }

related Issue:

Angular component default style css display block

user_84951450
Related