Fixing HTML Text Control Bug on Header Component

PowerApps Header Component , Html Text control uneven output solution

How to resolve an HTML text control bug?

In PowerApps, you can create a custom header component to maintain consistency across screens or to enhance the user experience. Here are the steps to create a header component with the correct display of the current user's name and email address:

• Go to the Components tab.
• Select "New Component."
• Change the size of the component to 1366 x 100.
• Fill the component with the color of your choice.
• Add an HTML control and write the HTML code to display the Display name and email address of the current user.
• Create custom properties and add the header component to the screen.

However, when running the app in play mode, you may encounter a bug with the HTML text control that displays the unexpected output. To overcome this issue, follow these additional steps.

• Go to the app and click on the "OnStart" property of the app.
• Add the following code snippet to set the user variable:

  Set(
      varCurrentUser,
      User()
  );
  

• Continue with the creation of the component by following the steps mentioned above.
• Add the HTML control and write the following code to the control.

  "<div style='text-align:right;font-size:15;font-weight:Semibolder;vertical-allign:middle;'><b>Welcome,</b> " &varCurrentUser.FullName&"</b><br><i>"&varCurrentUser.Email&"</i>"

• Save and publish the app.
• Run the app, and you will be able to see the desired output.

Output