HTML style issues with HTML email content - app gets destroyed

Hello,

I have a ST 2.3/Cmd 4/Cordova 3.6 email app that pulls a list of emails based on search criteria. It's a simple Navigation View implementation; when a user taps a list item (email snippet), a details panel opens up that then loads the email via AJAX into the panel. It loads the HTML version of the email.

The problem I have is that depending on the email content, some emails completely destroy the styling and sizing of the entire app. Most emails load fine, but some emails cause complete UI damage, requiring the user to restart the app.

The first example shows the app working fine (all screens below from iPhone 4S in landscape; portrait does not solve the probem):

List of results:

photo 1.PNG

Tapping on a result opens the details successfully (I can navigate back to the above list successfully):

photo 2.PNG

Now, in the following case, I try to load another result, and get into trouble. The search results list looks fine:

photo 3.PNG

Now, when I tap the first result, the following happens (notice the reduced width of the panel, and the missing title, navigation arrow adjusted right by a lot):

photo 5.PNG

Worse, when I try to navigate back to the original list, I end up with this screen (the original results list is completely destroyed:

photo.PNG

I suspect it's a styling interference or HTML tags issue; I don't control what styles are being used/referenced in the email HTML content.

This has me completely stumped. Any help or suggestions or best practices on how best to load external content into panels would be hugely appreciated. I would like to avoid using iFrames as that would introduce new problems even if it fixes this one. Do I need to wrap my external HTML content with something to prevent this?

Please help!

Thanks,

Mohammad

San Jose, CA

HTML style issues with HTML email content - app gets destroyed