How To Make A Power Apps Auto-Width Label

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/how-to-make-a-power-apps-auto-width-label/. Author: Matthew Devaney.

How To Make A Power Apps Auto-Width Label Posted by - Matthew Devaney on - January 22, 2023 21 Comments

An auto-width property would be useful to have for several Power Apps control types including labels and buttons etc. For example, with auto-width, we could easily create a breadcrumbs UX . Each breadcrumb is a different size and is not known in advance. In this article, I’ll give two solutions on how to make a Power Apps auto-width label. You can either build your own or download a pre-made one . Table of Contents

Option #1: Make Your Own Auto-Width Label Create A New Label In Canvas App

Insert An HTML Text Control With AutoHeight Enabled

“>Set Label Width Equal To Height Of HTML Text Control

Option #2: Download A Pre-Made Auto-Width Label Install The Power Apps Creator Kit

Import The Auto-Width Label Into A Canvas App

Option #1: Make Your Own Power Apps Auto-Width Label

This approach uses a clever technique to determine what the width of the label should be. We will create an HTML control with same text as the label, the same font and the same text size. Then we will rotate the text 90 degrees and set the HTML text control’s AutoHeight property to true. The height of the HTML control will tell us the length of the auto-width label.

I first saw this solution posted on Twitter by Robin Rosengrün ( @power_r2 ) and Jake Siskon ( @JakeSiskon ). Create A New Label In Canvas App

Open Power Apps studio and create a new app from blank. Insert a blank label onto the screen.

Write these words in the Text property of the label.

"The quick brown fox jumps over the lazy dog" Code language: JSON / JSON with Comments ( json )

Also apply these properties to the new label: Font : Font.'Open Sans' Size : 13 PaddingBottom : 0 PaddingLeft : 0 PaddingRight : 0 PaddingTop : 0 Code language: HTTP ( http )

Insert An HTML Text Control With AutoHeight Enabled

Create an HTML text control and place it on the screen.

Set the AutoHeight property of the HTML text control to true. This makes the height of the HTML control expand to fit the text inside it. true Code language: JavaScript ( javascript )

Apply these values to the HTML text control properties as well to ensure it uses the same formatting as the label. Font : lbl_FlexWidthLabel.Font Size : lbl_FlexWidthLabel.Size PaddingBottom : 0 PaddingLeft : 0 PaddingRight : 0 PaddingTop : 0 Code language: HTTP ( http )

We will use HTML and CSS code to rotate the text and make its starting position the top left corner of the control.

Copy and paste this code into the HTMLText property of the HTML text control. The code below uses Power Fx $-string notation . Ensure the label referenced between the { } brackets matches the name of the label in the app.

quot; < div

style = ' display: inline-block; margin: 0px 30px; position: relative; transform: rotate(90deg); transform-origin: top left; white-space: nowrap; ' > {lbl_FlexWidthLabel.Text} </ div > " Code language: HTML, XML ( xml )

Set Label Width Equal To Height Of HTML Text Control

We can assume the width of the auto-width label should be equal to the height of the HTML text control.

Use this code in the Width property of the auto-width label. A reference to the padding properties of the label are also included in case we want to add extra space on the left or right. htm_CalculateLabelWidth .Height + Self .PaddingLeft + Self .PaddingRight Code language: CSS ( css )

Option #2: Download A Pre-Made Power Apps Auto-Width Label

In this approach, we will download and import an auto-width label component published by Microsoft. To do this, the ability to use code components in an environment must be enabled by a system administrator. Install The Power Apps Creator Kit

Go to the Power Apps Creator Kit page on the Microsoft Learn website and download the Creator Kit.

After the Power Apps Creator Kit is downloaded, ask an administrator to check if the Power Platform environment where it will be used has the Power Apps component framework for canvas apps setting enabled. This menu where this setting is found in the Power Platform Admin Center is located at the path Environments > (Enivornment Name) > Settings > Features .

Go to make.powerapps.com and import the solution into the desired environment.

Open the solution once it has been imported. The auto-width label will appear under the custom controls group.

Import The Auto-Width Label Into A Canvas App

Open Power Apps studio and create a new canvas app from blank. Go to the Insert menu on the left-navigation bar. Scroll to the bottom of the menu and choose Get more components .

Choose the Code tab and select the Auto Width Label . Click Import .

Expand the code components group in the insert menu to reveal the Auto Width Label . Add an auto-width label to the screen.

The auto-width label needs one additional step to configure. It does not stretch to fit the text within it by default.

Set the width of the auto-width label to this code to automatically size it. Self .AutoWidth Code language: CSS ( css ) Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions about How To Make A Power Apps Auto-Width Label please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps