0
352
VistasAngular mat-dialog-title y mat-dialog-actions no se pegan
No estoy seguro de lo que estoy haciendo mal aquí, pero mi cuadro de diálogo no parece estar utilizando mis secciones. Así es como estoy presentando el diálogo:
<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>Así es como se ve cuando estoy en la parte superior del cuadro de diálogo.
Así es como se ve cuando me desplazo hasta la parte inferior del cuadro de diálogo.
De acuerdo con la documentación, cuando se usa [mat-dialog-title] el título debe permanecer en la parte superior, y cuando se usan [mat-dialog-actions] las acciones deben permanecer en la parte inferior del cuadro de diálogo. Como se ve en las capturas de pantalla, eso no está sucediendo.
Así es como estoy abriendo el modal:
showCmdArgsDialog() { this.dialog.open(CmdArgsDialogComponent, { width: '75vw', height: '80vh', panelClass: 'cmd-args-dialog' }) }2 Respuestas
Responde la pregunta0
No es pegajoso debido a las opciones de diálogo:
{ width: '75vw', height: '400px', } Pero todavía tiene algunos problemas con FlexLayoutModule y el componente app-dialog-header . Funciona bien con mat-dialog-title nativo. Consulte StackBlitz .
0
Sospecho que el problema podría ser cómo se compilan los componentes angulares
Si observa en la ventana de elementos del navegador (captura de pantalla a continuación), puede ver que mat-dialog-title se muestra debajo del elemento app-dialog-header, sin embargo, debería ser al revés. Como otra respuesta menciona que con mat-dialog-title nativo esto funciona bien.
