0

La cuestión es que tengo en el html de mi proyecto angular el siguiente codigo de un modal arrastrable y redimensionable, el cual se muestra al hacer click en un boton:

<div>
    
    <button type="button" (click)="modalAcerca.show()"> <img src="../../../../assets/Acerca de mí.png">
    <br> Acerca de mí </button> 

</div>


<app-modal #modalAcerca class="modal-demo" [maximizable]="true" [backdrop]="false">
  <ng-container class="app-modal-header">Acerca De Mí</ng-container>
  <ng-container class="app-modal-body">
    <h3>MODAL DIALOG</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
  </ng-container>
  <ng-container class="app-modal-footer">
   
  </ng-container>
</app-modal>

El problema es que a la hora de querer modificar su apariencia en css(por ejemplo cambiar el color de la barra del header) me es imposible.

Ya intenté utilizando .app-modal-header, y también inspeccionando el modal, donde me figura que el nombre de la clase es class="ui-modal-header" pero el estilo sigue siendo el mismo.

Si alguien me pudiera ayudar a solucionarlo me salvarian. Gracias

1
  • Ya probaste ejecutando tu proyecto en Modo incognito (Si usas Chrome) o Ventana Privada (Si usas Firefox). Puede ser la caché
    – EvilFearzZ
    el 25 may. 2022 a las 0:15

1 respuesta 1

0

Algo debe estar interfiriendo en tu código con la asignación de estilos. en el ejemplo que te dejo a continuación no tengo problemas al reasignar estilos al header del modal.

Puedes probar agregando la regla !important al final de cada propiedad para que le de mayor relevancia. Por ejemplo background-color: black !important;

También es importante aclarar que a veces la memoria caché del navegador hace parecer que los estilos no se aplican. Intenta forzar el borrado de caché y revisa nuevamente.

.app-modal-header {
  background-color: black;
  color: white;
}
<div>
    <button type="button" (click)="modalAcerca.show()"> <img src="../../../../assets/Acerca de mí.png">
    <br> Acerca de mí </button> 
</div>
<br>
<app-modal #modalAcerca class="modal-demo" [maximizable]="true" [backdrop]="false">
  <ng-container class="app-modal-header">Acerca De Mí</ng-container>
  <ng-container class="app-modal-body">
    <h3>MODAL DIALOG</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p>
  </ng-container>
  <ng-container class="app-modal-footer">
  </ng-container>
</app-modal>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.