2

I have a bit of a weird problem.

I am creating a website with angular that displays pre-rendered html reports. I am using ng-include to display the html report. The problem is, the html report has it's own CSS style within the page and it is overwriting the CSS for the main website.

I was wondering if there is any way to contain the CSS within the report scope or div? I need the custom CSS for the report scope too, deleting it is not an option.

Thank you!

Improve this question
1
  • Why don't you just add the custom properties to an external css file and call it when needed?? Commented Apr 2, 2015 at 23:47

1 Answer 1

Reset to default
1

Here are a few options...

  1. Use iframes. It will ensure that your styles don't leak into the other document. Very compatible across browsers.

  2. Use shadow DOM. It was created to solve this exact problem, but it's relatively new, and not widely supported.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

This is absolutely right but probably the problem is likely caused by a lack of specificity with the css. For example, instead of using p {font-size: 14px}; use .report p {font-size: 14px;} and have a class of "report" on the root element of your template.
Right, but refactoring all of the styles for the site isn't an efficient approach.
Exactly what @posilabs said. The problem is I am working on updating an old web app at work that already generates these html reports. We are trying to update the framework only but we cannot strip the html reports from it's own styles because we do not have access to it's generation.
Did you have a chance to try loading the reports in iframes? I'm positive this will solve your issue.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.