css: div posicionado absoluto tendo um tamanho errado em um pai

Jan 10 2021

Estou tentando colocar uma imagem (sprite-sheet na verdade) dentro de uma grade css.
Para poder css-animar a sprite-sheet, eu tenho que definir sua posição como 'absoluta'. Consegui duplicar meu problema em um código muito simples:

primeiro eu tenho um componente de folha de sprite que contém a folha de sprite e o componente de imagem de compo que deve simular outro componente que contém esta folha de sprite

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%;
}

Então tentei exibir esta imagem em meu aplicativo:

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%;
}

Mas é isso que eu tenho:

legal, isso aconteceu porque minha imagem posicionada absoluta era relativa ao componente raiz porque eu não especifiquei posições para os outros componentes.

Então, adicionei um componente wrapper chamado sprite-sheet2 para ter uma posição 'relativa' e hospedar o componente sprite-sheet real.

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>

Mas então eu entendo:

Tudo acima de sprite-sheet2 tem largura e altura definidas, mas sprite-sheet2 e tudo que ele contém tem tamanho 0x0, embora esses componentes tenham largura e altura = 100%.

O que estou fazendo de errado?

Respostas

2 EricAska Jan 10 2021 at 05:13

Os componentes angulares hostnão têm exibição padrão, display:blockportanto, você mesmo precisa atribuí-la.

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

mas você pode definir a configuração em angular.json para atribuir a exibição padrão para novos componentes gerados com o ng g c XXXXcomando.

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

problema relacionado:

Bloco de exibição CSS do estilo padrão do componente angular