When I am trying to preview a HTML email in the email studio preview , it shows empty images but email looks fine in the INBOX.
Image size is width:600px and height:338px
Please help to resolve this issue in SFMC email studio
Also attaching html code of block
<table border="0" cellpadding="0" cellspacing="0" class="oneColumn global" role="presentation" style="background-color: %%=v(#contentBgColor)=%%;" width="100%">
<tr>
<td align="center" style="padding: 0 0 20px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
<tr>
<td align="center" style="background-color: %%=v(#imageFullBgColor)=%%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="margin: 0 auto;">
<tr>
<td align="center" style="width: 600px;">
<a alias="" conversion="false" data-linkto="other" href="%%=RedirectTo(#Image_Component_One_Url)=%%" target="_blank" title=""><img alt="" data-assetid="500960" height="300" src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg" style="width: 600px; max-width: 600px; max-height: 338px; display: block; margin: 0px; padding: 0px; border: 0px none transparent; text-align: center; height: 300px;" width="600"></a> <a alias="" href="#tbd" target="_blank"> </a></td></tr></table></td></tr></table></td></tr></table>
Thanks in advance
I want to show images in the preview of the HTML email in the email studio.
If you are using Chrome then the issue is likely due to Chrome blocking mixed content.
For example if you dont have SSL included in your SAP, and you try to serve content over ssl then that content will be blocked. In your case you are serving up: https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832__480.jpg
It can be determined whether or not the Private image domain (image endpoint) has SSL by navigating to Setup > Company Settings > Account Settings.
If an account HAS SSL the Portfolio Base URL will start with HTTPS.
If an account DOES NOT have SSL the Portfolio Base URL will start with HTTP.
More information can be found here: https://help.salesforce.com/s/articleView?id=000355099&type=1
I've had this problem in Chrome and Edge and can't find a reliable solution other than waiting as it seems to naturally fix itself.
If it's not working for you in Chrome switch to Edge or another browser, wait a few days and it should be working in Chrome.
Sorry for the not so helpful technical answer, but if it's helpful you are not alone.
Related
I have the following code:
<div ng-cloak ng-init="viewAlbum()" class="ng-cloak">
<h3 ng-cloak class="ng-cloak" ng-bind="album.Title"></h3>
<table ng-cloak class="ng-cloak">
<tr>
<td class="label-col"><span class="album-label">Composer</span></td>
<td class="value-col">{{album.Composer}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Release Year</span></td>
<td class="value-col">{{album.ReleaseYear}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Rating</span></td>
<td class="value-col">{{album.Rating}}</td>
</tr>
<tr>
<td class="label-col"><span class="album-label">Reviews</span></td>
<td class="value-col">
<ol>
<li ng-repeat="review in album.Reviews">{{review.Text}}</li>
</ol>
</td>
</tr>
</table>
The problem is that I am seeing a quick flicker when the page load. I'm am not seeing raw unprocessed angular code. Instead, the entire table flickers including the static text such as the labels.
I did some experimenting - when I remove the H3 tag, I no longer see the flicker. So, I believe what is happening is the H3 tag is initially rendered with no value and therefore takes up no vertical space. When the value of the album title is rendered, the table is pushed down, and it is this "pushing down" that is causing the flicker. My theory could be wrong however.
The ng-clock attributes don't mitigate this. I tried a verbose option of surrounding the H3 tag in a container DIV and setting the height and min-height of that DIV in the css but that also isn't preventing the flicker.
As I said, if I remove the H3 tag, there is no flicker. Any suggestions please?
As mentioned in the below link you can Just wrap your h2/h3 tag in a div with display: inline-block; like this:
<div class="header2"><h3></h3></div>
and then add this to your css:
.header2 { min-width: 100px; width: auto; min-height:45px; background-color:#333; color:#FFF; display:inline-block; padding:10px; }
Here's a jsfiddle of two h2 tags with the above properties: https://jsfiddle.net/AndrewL32/e0d8my79/21/
Check :How do I make an inline element take up space when empty?
I recommend you also to use ng-bind for all your doms and remove the ng-cloak too
I am using bootstrap with AngularJS and trying to ng-repeat out a table within the template I purchased and when over a certain amount is put into the orderInformation.items array I run into issues with how the print looks.
I want to be able to hit print and have a defined page heading and a defined page footer that will not change and should nest in the top and bottom of the print preview across all pages. The only content that will change is the items that AngularJS is doing an ng-repeat on.
How can this be done? I've been searching for days and days and nothing out there seems to work.
<div class="row">
<div class="col-md-12 card-box">
<table id="invoice-contents" style="width: 100%">
<thead>
<!-- This is where logo, company details, barcode go -->
</thead>
<tbody>
<table id="item-table" class="table m-t-30" style="border-bottom: 1px solid rgba(0,0,0,.1)">
<thead>
<!-- Invoice Item headers -->
</thead>
<tbody>
<tr ng-repeat="item in orderInformation.items">
<td style="text-align: center">{{$index + 1}}</td>
<td style="text-align: center">{{item.qty.ordered}}</td>
<td style="text-align: center">{{item.qty.shipped}}</td>
<td style="text-align: center">{{item.qty.backordered}}</td>
<td style="text-align: center">{{item.binLocation}}</td>
<td style="text-align: center">{{item.partNumber}} - {{item.description}}</td>
<td style="text-align: center">{{item.price.current * item.qty.shipped | number: 2}}</td>
<td style="text-align: right">{{item.price.extended * item.qty.shipped | number: 2}}</td>
</tr>
</tbody>
</table>
</tbody>
<tfoot>
<!-- Special order notes, totals, taxes, terms -->
</tfoot>
</table>
</div>
</div> <!-- end container -->
This doesn't work when I use the recommended CSS that I have found around:
thead { display: table-header-group; }
tbody { display: table-row-group; }
tfoot { display: table-footer-group; }
The documentation says a table can't have two thead so I know the problem lies there, but I can't find any other way to get a block to print top and bottom on all pages other than table-header-group.
A way round this through much trial and error was to product an onscreen display of a single invoice page with how ever many rows of data and then use display:none to hide a view that would only show during print with CSS #media print. I had to calculate how many rows would show on each page and use .splice() and nested ng-repeats to get it displaying properly.
I'm building an email template builder in React and I need to be able to have things like Margin (with a capital M) in the style tags of rendered elements. This is for compatibility reasons with older email clients like Outlook.
Writing this:
<table
cellPadding="0"
cellSpacing="0"
style={{
margin: '0 auto',
Margin: '0 auto',
}}
>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Totally ignores the second, uppercase Margin on render. How can I get the second Margin to be applied instead of ignored?
Based on our discussion, you can always make use of Dangerously Set innerHTML to get your desired, custom, output.
React inline styles do not support custom property names at this time.
All ,
I am using ng-table for the Grid. I am using following code snippet to set the column .
<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center">{{people.accessID}}</td>
But I am not able to center align the Column Header but column data.
Here is the source code snippet for Access ID Header.
<th ng-repeat="column in $columns" ng-class="{ 'sortable': parse(column.sortable), 'sort-asc': params.sorting()[parse(column.sortable)]=='asc', 'sort-desc': params.sorting()[parse(column.sortable)]=='desc' }" ng-click="sortBy(column, $event)" ng-show="column.show(this)" ng-init="template=column.headerTemplateURL(this)" class="header sortable"> <!-- ngIf: !template --><div ng-if="!template" ng-show="!template" ng-bind="parse(column.title)" class="ng-binding ng-scope">Access ID</div><!-- end ngIf: !template --> <!-- ngIf: template --> </th>
Question is , How to center align the Header for a particular column in ng-table?
The answer submitted by #OpenUserX03 is almost perfect, except you have to wrap the class name in single quotes, like so:
<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center" header-class="'text-center'">{{people.accessID}}</td>
You can use the header-class attribute to set the class for - you guessed it - the header.
<td data-title="'Access ID'" sortable="'accessID'" style="width:120px" class="text-center" header-class="text-center">{{people.accessID}}</td>
i used to have the same issue how to align left my ng-table headers.
on the documentation of ng-table it does not say anything nor at the examples.
you have two ways to do this the fast and the more 'professional'
fast way:
open files ng-table/dist/ng-table.css and ng-table.min.css, according on which css file you use.
on the first line it manages the header,
.ng-table th {
text-align: center;/*just change that parameter to left/right*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
'professional' way: create a custom style and add it to your website css file ,like this :
.table thead th {
text-align: left;/*change that parameter to left/right*/
}
Hope helps, good luck.
To anyone who still has this issue, also OP, since he has not yet accepted an answer, this is how I do it. in your css (any .css)
table[ng-table] th {
text-align: left;
border-top: none;
}
Fix for ngTable
For those seeing this a year later. None of the above solutions worked for me. I added this to a custom css file:
.ng-table th {
text-align: center !important;
}
Which centered the content in the header (see images)
From this:
To this:
table .text-center {
text-align: center;
}
JSFiddle http://jsfiddle.net/BrTzg/411/
We are using ExtJS4 in our application. We have a problem with grid focus.We are using grid.getView().focusEl.focus() in ExtJS3. Now it seems that this is not working.What is the replacement for this one in ExtJS4.
I have helped you checked on the differences in ExtJS3 and ExtJS4, the major changes is the focusEl has been removed from the gridView element.
In ExtJS3, focusEl is the anchor link in the view
<div class="x-grid3-scroller" id="ext-gen10" style="width: 298px; height: 174px; ">
<div class="x-grid3-body" style="width:100px;" id="ext-gen12">
<div class="x-grid3-row x-grid3-row-first x-grid3-row-last" style="width:100px;">
<table class="x-grid3-row-table" border="0" cellspacing="0" cellpadding="0" style="width:100px;">
<tbody>
<tr><td class="x-grid3-col x-grid3-cell x-grid3-td-0 x-grid3-cell-first " style="width: 100px;" tabindex="0"><div class="x-grid3-cell-inner x-grid3-col-0" unselectable="on">0</div></td></tr>
</tbody>
</table>
</div>
</div>
</div>
In ExtJS4, this anchor link doesn't exist
Solution
This is a small fiddle test I have created for you. Basically what you need to change is as follow:
grid.getView().el.focus();
Instead of getting the focusEl (an anchor link), we use the whole element.
Hope this solve your problem.