Trouble displaying HTML emails in an Ionic App

ionic-v1
1

Hi,

I’m building an Ionic based mobile app that will have the ability to show emails inside of it. What I’m having trouble with is showing the emails properly, that is to say they emails are not scaling down properly to the device width due to their own css.

I’ve tried two approaches but both seem to have some drawbacks.

Approach 1 is the iframe:

This let’s me scale the email properly down but I cannot pinch zoom into the email to read the smaller text.

Approach 2 is with CSS scaling with the transform property:

This forces some elements to be scaled down but I can’t specific one transform percentage as emails are all different widths.

Does anyone have any insight as to how other mail apps showcase the emails they receive.?

Thanks

2

maybe you can do something like this --> use only the content of the email (everything in the body-tag) --> use angular’s $sce-Service to allow all the html stuff in it --> but the content in a div via ngBindHtml directive.

3

Thanks for your reply.Even though i use ng-bind-html,the inline style in th eamil make the content flow outside the div.
So the content is cut off.

Thanks
Shivani

4

You can try adding a class ‘item-text-wrap’ to the div.

5

No that didn’t work.
The email has lot of inline styles

 
Facebook   Twitter
 

So it does not fit into the parent div.

Thanks

6

I fixed the issue by init Zoom.Closing this issue.

Thanks