Styling in CustomString HTML effecting main page

0
Hi, I am currently using the customstring widget to display some html retrieved from an api in order to display a preview of an email. The issue I'm experiencing is that when the html is displayed inside the widget the styling also effects the main page. Below is an example where the heading is changed to green. The markdownviewer widget also seems to have the same issue. Any help would be much appreciated.  
asked
3 answers
2

Hi Graham,

Try using an iframe with srcdoc attribute

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>

https://stackoverflow.com/questions/6102636/html-code-as-iframe-source-rather-than-a-url

-Andrej

answered
0

Hello Graham,

 

What you can do is add an extra class on the page you want to change your styling for.

In this case you can add a container around the email content with a unique class and change your styling in the newsletter to add this class.


from:

.h1 {
 color: green;
}

to:

.newsletter .h1 {
  color: green;
}

 

answered
0

Thanks for the suggestions. So I tried the <iframe ....></iframe>  approach as the argument for the customstring widget. It displayed the html without effecting the css of the main page. However the size of the content didn't autoresize when the popup page was resized. The solution that worked best in the end was to serve the html using the published rest service and use the url as an argument using the mendix iframe widget.  

answered