Creating Auto-Width Labels in Power Apps

Creating Auto-Width Labels in Power Apps 

Creating a Custom Auto-Width Label for Your Power Apps

This methodology employs a sophisticated technique for ascertaining the appropriate width of a label. It entails the generation of an HTML control bearing identical text content as the label, utilizing the same font type and text size attributes. Subsequently, the text within the HTML control is rotated by 90 degrees, and the Auto Height property of the HTML text control is configured to operate in an automatic mode. The resulting height of the HTML control serves as a reliable indicator of the label’s dynamically determined width.

Create a New Canvas App:

Go to the Power Apps portal and sign in. 
Click on “Create” and select “Canvas app from blank.” 

Creating an a blank canvas app for auto width label in PowerApps step-1

Develop an application titled ‘App Name’ and optimize it for tablet devices in the desired format. 

Please Insert two Text Labels” to the screen. 

Please input the following words into the “Text” property of the Label2.

					"Life is a journey, and every moment is a new opportunity"

Additionally, kindly extend the application of these attributes to the recently introduced label. 

					Font: Font.'Open Sans'
Size: 13
PaddingBottom: 0
PaddingLeft: 0
PaddingRight: 0
PaddingTop: 0

Add an HTML text control with the 'AutoHeight' feature enabled

Generate “HTML text and Text Label elements and position it within the user interface. 

Enable the AutoHeight property for the HTML text control, which results in the control dynamically adjusting its height to accommodate the content within. 

Enableing the 'AutoHeight' property for the HTML text control to get auto-width-labels in powerapps

Implement these values into the HTML text control properties to ensure consistent formatting alignment with the corresponding label. 

					Font: Label2.Font
Size: Label2.Size
PaddingBottom: 0
PaddingLeft: 0
PaddingRight: 0
PaddingTop: 0

We intend to utilize HTML and CSS code to achieve text rotation and establish its initial placement at the upper left corner of the element. 

Please insert the provided code into the HTMLText property of the HTML text control. The code utilizes Power Fx $-string notation. It is essential to verify that the label enclosed within the curly braces { } corresponds to the app’s label name.

					$"<div style='margin: 0px 30px;position: relative'> 

Adjust the label width to match the height of the HTML text control

It is reasonable to infer that the width of the auto-width label should be equivalent to the height of the HTML text control. 

Please implement the following code within the Width property of the auto-width label. Additionally, we have included a reference to the padding properties of the label in the event that there is a need to incorporate additional spacing on either the left or right side. 


The Conclusive Appearance of this Application!

The Conclusive Appearance of this Application performing the Auto-Width-labels in PowerApps

If you want to learn more about the Power Apps, feel free to explore our other informative articles and tutorials.

Have additional inquiries? Our team is here to assist. Please don’t hesitate to reach out!

About The Author