CSS clashes with other libraries

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
Posts: 2
Joined: 07 Feb 2022, 15:51

02 Mar 2023, 10:46

Hi, we have purchased primeng blocks which looks fantastic but are finding that the CSS from PrimeFlex is clashing with our main template, Metronic 8 https://keenthemes.com/metronic. It is the flex-column, flex-row classes causing the issues as they clashes with their own classes: https://preview.keenthemes.com/html/met ... ex-layouts. Do you have any advice on the best way for us to resolve this without altering the metronic theme please as the theme is heavily used throughout our existing product

Posts: 130
Joined: 17 Dec 2021, 09:33

13 Mar 2023, 15:53


Sorry for the late response, since the Metronic templates use bootstrap it's inevitable having CSS clash. View encapsulation is the easiest way to solve this. For more info about view encapsulation please visit https://angular.io/guide/view-encapsulation

Here is an example of how to use both PrimeFlex and Bootstrap classes together

https://stackblitz.com/edit/angular-ok3 ... %2Fmain.ts

In the example above, both components are using same classes. But only the encapsulated component is affected by PrimeFlex.

Post Reply

Return to “PrimeBlocks for PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest