Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

350
Visualizações
Angular mat-dialog-title and mat-dialog-actions not sticking

I am not sure what I am doing wrong here, but my dialog does not seem to be utilizing my sections. This is how I am laying out the dialog:

Stackblitz Example

<ng-container ngProjectAs="[mat-dialog-title]">
  <app-dialog-header header="Command Line Arguments"></app-dialog-header>
</ng-container>

<div mat-dialog-content fxLayout="column" fxLayoutGap="5px">
  <textarea rows="15" class="primary-background"></textarea>
</div>

<div mat-dialog-actions fxLayout="row" fxLayoutAlign="space-between center">
  <button mat-button>Cancel</button>
  <button mat-button color="accent">Save</button>
</div>

This is how it looks when I am at the top of the dialog.

Scroll top

This is how it looks when I scroll to the bottom of the dialog.

Scroll bottom

According to the documentation when using [mat-dialog-title] the title should stick to the top, and when using [mat-dialog-actions] the actions should stick to the bottom of the dialog. As seen in the screen shots, that is not happening.

This is how I am opening the modal:

  showCmdArgsDialog() {
    this.dialog.open(CmdArgsDialogComponent, {
      width: '75vw',
      height: '80vh',
      panelClass: 'cmd-args-dialog'
    })
  }
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

It is not sticky because of dialog options:

{
  width: '75vw',
  height: '400px',
}

But it still has some issues with FlexLayoutModule and app-dialog-header component. It works fine with native mat-dialog-title. See StackBlitz.

about 4 years ago · Juan Pablo Isaza Relatório

0

I suspect the issue might be coming how angular components are compiled

If you notice in browser elements window (screenshot below) you can see that mat-dialog-title is shown under app-dialog-header element, however, it should be the other way around. As other answer mentions that with native mat-dialog-title this works fine.

enter image description here

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda