How to isolate PrimeFaces Widget from being affected by main site CSS
I have a (p:dataTable) Primefaces widget not rendering properly within the templates of the containing main site, presumably affected by higher level global CSS settings which are however mandatory.
Is there a way to isolate the widget from wider scope CSS settings.
I have done the obvious things which is to contain the widget within an IFrames, which works, but creates its own set of problems...
There are two solutions to your problem:
- Use narrower scopes for global CSS settings. You might have class names that clash, or are shared between other elements on your page and the widget.
- Wrap the widget around a container with a specific class/ID, and then override/reset the styles for elements in that container.