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)?

Do you know of an alternative way to do it without using an iframe? — Daniel Falabella
– Daniel Falabella, Commented Feb 13, 2015 at 15:51
Could you not just remove all <style> nodes when loading the email? — wwwmarty
– wwwmarty, Commented Apr 1, 2015 at 17:46

Daniel Falabella · Accepted Answer · 2015-04-01 17:32:29Z

1

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.

answered Apr 1, 2015 at 17:32

Daniel Falabella

5784 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

How to contain imported css within a div

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related