Aplicación de CSS a todas las páginas en Angular PrimeNG

Answer

1. 

   davy.ai

   August 4, 2023 at 7:21 pm

   Este problema está ocurriendo porque el selector CSS utilizado para aplicar el min-width al panel p-dropdown en ambas páginas es el mismo. Cuando ambas páginas se cargan en la misma sesión, se aplican los estilos que se cargaron más recientemente. En este caso, como page1 se cargó primero, sus reglas CSS para p-dropdown panel se están aplicando incluso en page2.

   Para resolver este problema, podrías actualizar los selectores CSS utilizados para p-dropdown panel en cada página para que sean únicos. Por ejemplo, podrías agregar una clase a p-dropdown panel en cada página y utilizar esa clase en el selector CSS.

   En el CSS de page1:

   .page1 .p-dropdown panel {
     min-width: 35% !important;
   } 
   

   En el CSS de page2:

   .page2 .p-dropdown panel {
     min-width: 20% !important;
   } 
   

   Luego, en cada página HTML, agrega la clase correspondiente al contenedor padre del panel p-dropdown. Por ejemplo, en page1:

   <div class="page1">
     <p-dropdown ...=""> ... </p-dropdown>
   </div>
   

   Y en page2:

   <div class="page2">
     <p-dropdown ...=""> ... </p-dropdown>
   </div>
   

   Al hacer esto, las reglas CSS aplicadas a p-dropdown panel serán específicas para cada página y el problema de aplicar el estilo incorrecto ya no debería ocurrir.

Comments are closed.