CSS clashes with other libraries
Forum rules
Please note that response time for technical support is within 3-5 business days.
Please note that response time for technical support is within 3-5 business days.
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
Hi,
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.
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.
-
- Information
-
Who is online
Users browsing this forum: No registered users and 1 guest