web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Automate / Add Space to Compose A...
Power Automate
Unanswered

Add Space to Compose Action HTML Code

(0) ShareShare
ReportReport
Posted on by 5,325 Super User 2025 Season 2

I'm still in my "always be learning" mode.🤓

I'm using the highlighted portion of the code below in a compose to artificially add space between text.

It works but isn't the right tool for the job.

I want to add space between the text where the red verticle lines are shown at the top of the PDF so that it 'looks' columnized; Is there a better way to accomplish this task, without actually adding a 'table'?

<b>Cert/Qual:</b> @{triggerOutputs()?['body/Certification/Value']}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<b>Expiration Date:</b>

Phineas_1-1669483516489.png

 

 

Categories:
I have the same question (0)
  • grantjenkins Profile Picture
    11,063 Moderator on at

    Can you try embedding your code inside <pre>YOUR HTML</pre> to see if that keeps the tabs you've added without collapsing the spacing. Not sure if this will work as you expect, but worth a shot.

     

    For example:

     

    <pre><b>Cert/Qual:</b> @{triggerOutputs()?['body/Certification/Value']}&nbsp; &nbsp; &nbsp;<b>Expiration Date:</b></pre>

     

     

  • Phineas Profile Picture
    5,325 Super User 2025 Season 2 on at

    Edited Reply: See bottom for update

    That did impact the content.
    Phineas_1-1669567128818.png

     

    The line with full name is with the 'pre' you suggested.

    The six spaces are there (between the last name 'Jack' and 'Member's', but the font no longer matches the rest.

    Phineas_2-1669567251972.png



    Edit: I went back and removed all the &nbsp; language and the spaces now show as desired. It's of an awkward process but I did manage to get the look I want.

    However, I have lost control of the original font size and type. The pre changed the font. How do I regain control of font size and type?

    Phineas_0-1669571618626.png

     

    Phineas_1-1669571718853.png

     

  • v-chengfen-msft Profile Picture
    on at

    Hi @Phineas ,

    If you want the content fonts in Pre to be the same,

    Please try :

     <pre style="font-size: 20px; font-family: 'Times New Roman', Times, serif;">

    If you want to set the font yourself.

    Please try:

    <font size="24">Your Text</font>

    Here are some links for your reference:

    Font family (HTML) - CodeDocs

    How to change the font size in HTML? - GeeksforGeeks

     

    Best Regards

    Cheng Feng

  • grantjenkins Profile Picture
    11,063 Moderator on at

    Or another option would be to add some CSS for the pre tag. You would add the CSS in your Compose - HTML Content just above the Output. This would apply the style across all of your pre tags.

     

    <style>
    pre {
     font-size: 20px;
     font-family: 'Times New Roman', Times, serif;
    }
    </style>
  • Phineas Profile Picture
    5,325 Super User 2025 Season 2 on at

    Thank you, I'll try both just so I can confirm and know.

     

    I was also trying to incorporate an employee specific image above or adjacent to the content impacted by the  'pre' command.

     

    As these things kinda go together should such language be in the same compose for the 'pre' or should there be separate code, and what should that code be?

     

    I DO have a separate question already in the system on this image issue. I've successfully hard-coded in the single image (the company logo in the header), however I can't figure out how to code for a dynamic image of each employee based on the 'Fullname'.

     

    Each line in the SP List has a separate image in 'CompanyLogo', and each of those same images is loaded into a SP Library, as I'm unsure of best practices in this regard - though I believe placinf the images in a library is recommended.

     

    Any thoughts?

  • Phineas Profile Picture
    5,325 Super User 2025 Season 2 on at

    I tried the following. No change in the spacing.

    Phineas_0-1669649622415.png

    Phineas_1-1669649654625.png

     

  • v-chengfen-msft Profile Picture
    on at

    Hi @Phineas ,

     Please inline your stylesheets. Most clients will either erase the stylesheet or rewrite it.

    Here is a test for your reference:

    vchengfenmsft_1-1669685951047.png

    Here is result:

    vchengfenmsft_2-1669685994984.png

     

     

    html - CSS not showing in outlook - Stack Overflow

    Outlook Email Rendering Issues and How to Solve Them - Litmus

     

    Best Regards

    Cheng Feng

     

  • Phineas Profile Picture
    5,325 Super User 2025 Season 2 on at

    Thank you for the reply.

     

    If I may ask, it seems that the spacing will still be content dependent.

     

    For example, the length and spacing of each line will be dependent upon the content of the 'label' and the content of the 'field' from the data source, yes?

     

    Meaning, using this dynamic method will not allow for uniformity in spacing, yes?

     

    if the above is true, is there a way to ensure the second set of label/field line up vertically everytime - as if there were two columns and the second set of content on each line line starts at the same spot?

  • grantjenkins Profile Picture
    11,063 Moderator on at

    The idea was to add the style/css in addition to still keeping your <pre> tags around your content. The style/css would style any pre tags it found with the styles you put (font-size, font-family, etc.)

     

    I would actually suggest a better option would be to put everything into another table set to width of 100% and remove the borders. This would ensure everything looked uniform regardless of length of values, etc.

  • Verified answer
    grantjenkins Profile Picture
    11,063 Moderator on at

    This is what I would suggest as the best outcome in this instance.

     

    See flow below as a quick example. I'll go into each action.

    grantjenkins_0-1669690123659.png

     

    CSS is a Compose that has some styling for your Table.

    grantjenkins_1-1669690214400.png

    <style>
     table {
     font-family: arial, sans-serif;
     border-collapse: collapse;
     width: 100%;
     }
    
     td, th {
     text-align: left;
     padding: 15px 15px 15px 0;
     }
    </style>

     

    HTML is another Compose that contains the actual HTML. Note that you would replace the values with your actual content from your dynamic fields. You would also need to change the image URL to your actual image.

    grantjenkins_2-1669690289861.png

     

    <img src="https://www.w3schools.com/images/w3lynx_200.png" alt="" />
    <h2><strong>TGG Logistics, LCC</strong></h2>
    <h4><strong>New Employee Profile</strong></h4>
    <hr>
    <hr>
    
    <table>
     <tbody>
     <tr>
     <td>
     <strong>Full Name:</strong> Joe Bloggs
     </td>
     <td>
     <strong>Member's Email:</strong> Joe.bloggs@email.com
     </td>
     </tr>
     <tr>
     <td>
     <strong>Shift Assigned:</strong> Day
     </td>
     <td>
     <strong>Security Level:</strong> High
     </td>
     </tr>
     <tr>
     <td>
     <strong>Supervisor's Name:</strong> Jane Doe
     </td>
     <td>
     <strong>Supervisor's Email:</strong> Jane.Doe@email.com
     </td>
     </tr>
     <tr>
     <td>
     <strong>Notification Email Sent:</strong> No
     </td>
     <td>
     
     </td>
     </tr>
     </tbody>
    </table>

     

    Then you would just need to include the CSS and HTML in your output. In this example I'm using Send an email.

    grantjenkins_3-1669690407049.png

     

    The email would look something like the screenshot below:

    grantjenkins_4-1669690461978.png

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Automate

#1
Michael E. Gernaey Profile Picture

Michael E. Gernaey 538 Super User 2025 Season 2

#2
Tomac Profile Picture

Tomac 405 Moderator

#3
abm abm Profile Picture

abm abm 252 Most Valuable Professional

Last 30 days Overall leaderboard