How to contain imported css within a div

Question

I'm loading emails (via gmail's api) using Angular:

<div class="email-body">
  <div compile-html data-html="thread.message.body"></div>
</div>

When I do so, the loaded emails bring with them css styling that affect the css of the whole site.

For example, my css:

.container {
  width: 80%;
}

But an email (once loaded) brings the following css:

.container {
  width: 20% !important;
}

The css for .container gets overridden by the newly loaded css. Is there a way I could contain the imported css within a div (email-body)?

possible duplicate of [Div with external stylesheet?](http://stackoverflow.com/questions/16356939/div-with-external-stylesheet) — MatthewG, Feb 11 '15 at 18:32
Do you know of an alternative way to do it without using an iframe? — Daniel Falabella, Feb 13 '15 at 15:51

score 1 · Accepted Answer · answered Apr 01 '15 at 17:32

This could might not be the fastest way, but gets the job done without iframes (using javascript and jquery):

  $('.email-body').find('*').each(function () {
    if ($(this).css("width")) {
      var setWidth = $(this).css("width");

      //clearing width value
      setWidth = setWidth.replace(/[^0-9]/g, '');

      $(this).css("width", NEW WIDTH VALUE HERE);
    }
  })

If you are using Angular, you might want to wrap this in a $timeout.

How to contain imported css within a div

1 Answers1