Apply styles to particular div

help
1

Hello all,

In my application Im using gmail api and I’m displaying the mail in modal,

My problem is, now a days many mails are having styles and when I open that modal styles are applying to all application.

Now I want to restrict these styles to particular div only how to that?

Or is there any option to show this mail in separate iframe? If there is a chance of doing this, can somebody point me the steps or blog posts.

Thanks

2

Webmail clients typically:

  • Strip out all the style tags from the body
  • Convert all styles to inline style tags
  • Strip out classes and id’s from the tags
  • Sanitize some styles (like ignore display:none and some other potentially harming/misguiding styles, apply extra !important widths or overflows to make sure boundaries of the mail app are respected)

I think the gmail messages rest api endpoint has a format option where you can request the version that is already processed by gmail. I’m not exactly sure, but if it does, it will have done all that sanitization for you.

Otherwise, your best bet is to find some css parsing/inlining library to utilize.

1 Like
3

I think the answer is to use an iframe. You don’t need to have an external page/route to show inside the iframe. Instead you can use javascript to add the content. There’s an example using jQuery here: http://stackoverflow.com/a/18044234 (I have pasted the code below).

var emailBody = ...some Gmail API stuff...
var context = $('iframe')[0].contentWindow.document;
$body = $('body', context);
$body.html(emailBody);
4

There is this thing called Scoped Css. The support for it is only firefox 36 as of now. but there is a Javascript polyfill . Even with this polyfill you got issues. Best to use iFrames. nothing wrong with iframes, they are awesome .

5

I thought iframes were evil! Kidding :slight_smile:

Well, not kidding! But good to know it can be put to good use LOL

6

Thanks for your answer.
I checked with gmail api and there’s is a raw format option but it is not giving details like who sent the mail it was just raw msg.

It was same as when you goto emails and click on right corner of a mail and then select original message.

I’m planning to use I frames now, If we apply styles in iframes, do they apply to all the app?