Dynamic Label Width in Power Apps: Two Practical Approaches

When building a canvas app you often need labels that adjust their width based on the text they display. For instance, a product catalog screen may list item names of varying lengths, and each label should fit its text without extra space or manual resizing. Power Apps doesn’t include an AutoWidth property out of the box, but you can achieve the same effect using two different approaches.

In this article I’ll show you how to build a custom auto‑width label using an HTML text control and CSS rotation, and also how to use the ready‑made Auto Width Label component from the Power Apps Creator Kit.

Understanding the Challenge

Labels in Power Apps have a fixed width that you set manually. When the text is dynamic (e.g., from a data source or user input) you can’t predict the required size. Both solutions described below turn a label’s width into a calculated value that reacts to the content.

Option 1: Build a Custom Auto‑Width Label Using an HTML Control

This method uses a hidden HTML control with the same text, font, and size as your label. By rotating the HTML content 90 degrees and enabling AutoHeight, the height of the HTML control becomes equal to the width that the label should be. You then set the label’s Width to that height.

Step 1: Create a Sample Label

Insert a label onto your screen and name it lbl_ProductName. Set its Text property to:

"Premium Widget 3000"

Configure the label with these properties:

• Font – Font.'Open Sans' (any font works)
• Size – 14
• Padding – 0 for all four sides (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop)

Step 2: Add an HTML Text Control as a Measuring Tool

Insert an HTML text control and name it htm_WidthCalculator. Place it off‑screen (e.g., set X and Y to a large negative value) so it doesn’t interfere with the layout.

Set the following properties on the HTML control to match the label’s formatting:

• Font – lbl_ProductName.Font
• Size – lbl_ProductName.Size
• AutoHeight – true
• PaddingBottom, PaddingLeft, PaddingRight, PaddingTop – 0

Now set its HTMLText property to the following string. The CSS rotates the text 90 degrees and forces it onto a single line, turning the control’s height into a proxy for the text width.

$"<div style='display: inline-block; margin: 0 20px; position: relative; transform: rotate(90deg); transform-origin: top left; white-space: nowrap;'>" & lbl_ProductName.Text & "</div>"

We use string concatenation (&) to insert the label’s text into the div.

Step 3: Set the Label’s Width Based on the HTML Control Height

Select lbl_ProductName and set its Width property to the height of the HTML control, plus any desired padding:

htm_WidthCalculator.Height + Self.PaddingLeft + Self.PaddingRight

That’s it. The label will now resize itself whenever its Text property changes.

How It Works

The HTML control’s AutoHeight expands the div vertically to accommodate the rotated text. Because the text is rotated 90 degrees, the vertical height corresponds to the original text width. By reading that height and assigning it to the label’s Width, you get an auto‑resizing label that stays in sync with the content.

Option 2: Use the Auto Width Label Component from the Creator Kit

The Power Apps Creator Kit includes a ready‑to‑use Auto Width Label component that handles the sizing automatically.

Prerequisites

Your environment must have the Power Apps component framework for canvas apps feature enabled. This is typically turned on by an administrator:

• Go to the Power Platform Admin Center.
• Select your environment, then Settings > Features.
• Set Power Apps component framework for canvas apps to On.

Install the Creator Kit

1. Download the latest Creator Kit from Microsoft Learn.
2. Import the solution into your environment via make.powerapps.com.

Import the Auto Width Label into Your Canvas App

1. Open your app in Power Apps Studio.
2. Go to the Insert pane and scroll to the bottom to select Get more components.
3. Switch to the Code tab, find Auto Width Label, and click Import.
4. Expand the code components group in the Insert pane and drag an Auto Width Label onto the screen.

Configure the Component

The component needs one more step to size itself automatically. Set its Width property to:

Self.AutoWidth

Now the label will grow or shrink to fit its Text property.

Security / Performance Considerations

• The HTML control approach runs entirely client‑side and adds a small overhead. If you have dozens of labels using this technique, consider the Creator Kit component instead, which is more performant.
• Both methods work only in canvas apps; they are not available in model‑driven apps.
• The HTML control method requires that the label’s font, size, and padding stay in sync with the HTML control. If you change these properties on the label later, remember to update the HTML control as well.

Common Mistakes and Troubleshooting

The label width doesn’t change or is wrong

• Ensure the HTML control uses the exact same font and size as the label. Even a small mismatch will cause an incorrect width.
• Verify that AutoHeight is set to true on the HTML control.
• Check that the CSS transform and transform-origin are correctly applied. Missing them will break the rotation trick.
• The HTML control must remain visible (albeit off‑screen). Setting Visible = false often stops Power Apps from computing its height.

The label has extra space or is too narrow

• Adjust the margin value in the CSS (margin: 0 20px) to add or remove extra space around the text. This acts as additional padding around the measured width.

The Creator Kit component doesn’t appear in the Insert pane

• Confirm that the component framework feature is enabled at the environment level.
• Make sure the Creator Kit solution was imported successfully.
• Refresh the Insert pane after importing the component.

Which Method Should You Choose?

• Build your own – Use the HTML control method if you want a quick, dependency‑free solution, or if your environment doesn’t have the Creator Kit. It gives you full control and is simple to implement.
• Use the Creator Kit component – Opt for this if you need a polished, maintainable solution that integrates with other code components. It’s easier to update and more performant at scale.

Both approaches work well. Choose the one that best fits your environment and maintenance preferences.

References

• Original article by Matthew Devaney – How To Make A Power Apps Auto-Width Label
• Power Apps Creator Kit documentation – Microsoft Learn
• Enable Power Apps component framework – Microsoft Learn