cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
guptat
Frequent Visitor

Outlook Office365 Email Desktop Client overflowing the images width and height when sending through Power Automate

Can someone please help me in order to stop overflowing the images when the email has embed image of Base64 format. I am successfully able to display the image but the attribute of width and height is ignored and original image size is shown in the email.

In web, the template is all working fine but not in desktop client. Attached is the dummy template of the email which is not respecting the image height and width when used in Base64 format.

 

This is the HTML using in the send email action of the power automate:

 

<div style="width:80px;height:80px;overflow:hidden"><img width="60" height="60" style="width: 60px;height: 60px;overflow:hidden" src="data&colon;image/png;base64,<base64 image>">
</div>

 

 

In Web:

guptat_0-1630221921230.png

 

In Desktop Client Outlook:

guptat_1-1630221987882.png

 

Thanks

6 REPLIES 6
ekarim2020
Community Champion
Community Champion

It has always been the case that the Outlook Desktop client renders HTML slightly differently to a web client:

ekarim2020_1-1630227590529.png

Not being very familiar with HTML and CSS, I used SharePoint's Email a news digest as a template for the above,  then I modified it. It was a lot of work for me. The code for the image placement:

 

 <tbody>
        <tr style="font-size: 0px;">
            <td style="width:220px; padding-top:20px; padding-bottom:20px; vertical-align:top" width="220" valign="top">
                <!--This is image for the news item-->
                <img alt="" style="display:block; width:220px" width="220" src="@{variables('varNewsItemImage')}">
            </td>

 

The context:

 

<!--This is the start of the news item 1-->
<table
    style="border-collapse: collapse;border-collapse: collapse;border-collapse:collapse; border-spacing:0; width:558px; table-layout:fixed"
    width="558" cellspacing="0" cellpadding="0" align="center">
    <tbody>
        <tr style="font-size: 0px;">
            <td style="width:220px; padding-top:20px; padding-bottom:20px; vertical-align:top" width="220" valign="top">
                <!--This is image for the news item-->
                <img alt="" style="display:block; width:220px" width="220" src="@{variables('varNewsItemImage')}">
            </td>
            <td style="width:318px; vertical-align:top; padding-top:20px; padding-left:20px; padding-bottom:20px"
                width="318" valign="top">
                <div style="font-size:17px; color:#333333; line-height:20px; margin-bottom:10px">
                    <!--This is link to the news item-->
                    <a href="@{items('Apply_to_each_news_item')['{Link}']}" style="text-decoration:none; color:#0e0d0d"
                        id="OWAde91a5ae-e3bd-f175-d1a6-c57a59b34990"
                        class="OWAAutoLink">@{items('Apply_to_each_news_item')['Title']}</a>
                    <!--This is the news item Header-->
                </div>
                <div
                    style="color:rgb(102,102,102); font-weight:400; font-size:14px; margin-bottom:12px; font-family:'Segoe UI',Tahoma,Arial,sans-serif,serif,EmojiFont; word-break:break-word">
                    <!--This is the news item text -->
                    @{items('Apply_to_each_news_item')['Description']}
                </div>

                <div style="font-size:11px; line-height:13.5px; color:#767676">
                    Date: @{variables('varNewsItemDate')} &nbsp;&nbsp;&nbsp;Modified:
                    @{variables('varNewsItemModified')} </div>

            </td>
        </tr>
        <!--This is the divider between news items-->

        <tr style="font-size: 0px;">
            <td colspan="2" style="border-top:1px solid #D6D6D6" height="1">
            </td>
    </tbody>
</table> <!-- end of news item 1-->

 

Hope this helps.

Ellis

Hi @ekarim2020 ,

 

Thank you so much for the time to look into this issue. I abstracted all the CSS snippets that you shared and used it under my template but still with no success :(. Please also note what I have observed here is that when the image is in URL format then the width and height are working fine but if you are embedding image inline using base64 then width and height are ignored.

ekarim2020
Community Champion
Community Champion

For the the newsletter I was using embedded images.

Is there anything you can extract from the following sample code using a linked imaged (a test with an embedded image will follow in the next post) - which you can easily reproduce. I have also linked to a video and article below. May be a combination of the sample, video and article you can resolve your issue:

ekarim2020_1-1630233983412.png

ekarim2020_2-1630234043916.pngoutputs('Compose_HTML_formatting') outputs('Compose_Body')

Compose HTML formatting:

 

<style>
table {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  table-layout: auto;
}
table td, table th {
  border: 1px solid #AAAAAA;
  padding: 10px;
}
table tbody td {
  font-size: 13px;
}
table thead {
  background: #1C6EA4;
  border-bottom: 2px solid #444444;
}
table thead th {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table thead th:first-child {
  border-left: none;
}
</style>

 

 Compose Body:

 

<table class="blueTable"  style="border-collapse: collapse;border-collapse: collapse;border-collapse:collapse; border-spacing:0; width:558px; table-layout:fixed">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
<div class="links"><a href="#">&laquo;</a> <a class="active" href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">&raquo;</a></div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td><img <img alt="" style="display:block; width:120px" width="120" src="https://images.freeimages.com/images/large-previews/4dc/street-1366583.jpg"></td>
<td>cell2_1</td>
<td>cell3_1</td>
<td>cell4_1</td>
</tr>
<tr>
<td>cell1_2</td>
<td>cell2_2</td>
<td>cell3_2</td>
<td>cell4_2</td>
</tr>
<tr>
<td>cell1_3</td>
<td>cell2_3</td>
<td>cell3_3</td>
<td>cell4_3</td>
</tr>
<tr>
<td>cell1_4</td>
<td>cell2_4</td>
<td>cell3_4</td>
<td>cell4_4</td>
</tr>
</tbody>
</table>

 

See also: Video - Power Automate flow HTML Table Formatting in Email | Flows & SharePoint#

The video mentions the following article: Power Automate HTML Table Styling which formats a table similar to your own:

ekarim2020_4-1630234576411.png

Hope this helps.

Ellis

 

ekarim2020
Community Champion
Community Champion

Here is the result of testing using the Outlook Desktop client - with an embedded image in the email:

ekarim2020_0-1630235960885.png

The Compose Body code was updated by adding height dimensions:

<td><img alt="" style="display:block; width:120px;height:120px" width="120" height="120" src="@{outputs('img')}"></td>

Here is the results where the height property is not specified in the <img> tag:

ekarim2020_0-1630236096067.png

I used https://www.base64-image.de/ to convert the image to base64.

ekarim2020_1-1630235722925.png

Ellis

 

Hi @ekarim2020 ,

Many thanks for your effort but I am afraid it is not working on my Desktop client. It may be the version difference of outlook (as mentioned in Office365) that may be causing this issue. My outlook has this version shown below:

guptat_0-1630236598752.png

Also my very simple flow is shown below but this is also ignoring the height and width. The variable is having the correct base64 encoded image:

guptat_1-1630236724816.png

Output from above flow action which is not 50px in size:

guptat_2-1630236792996.png

 

ekarim2020
Community Champion
Community Champion

We are using different versions of the Outlook 365 client.

This is my Outlook version 64-bit v16.0.14228.xxx

ekarim2020_2-1630237267343.png

This is your version 32-bit 16.0.12527.xxx

ekarim2020_3-1630237294961.png

Does Outlook 365 still use Word to render HTML? Earlier version did use Word to render HTML emails.

See also: Outlook Rendering Issues and How to Solve Them in Wired Plus | Wired Plus

 

Ellis

Helpful resources

Announcements
2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Top Solution Authors
Top Kudoed Authors
Users online (1,239)