Auto height of text input control in Power Apps Canvas apps

Hello everyone and welcome to my blog. I am back with another blog on Power Apps. In today’s blog I will discuss on how to automatically adjust the height of text input control in Power Apps depending on content.

Let’s understand the requirement first. I have a text input control and I have changed the Mode of the text input control to multiline.

If I start typing in the box and after I enter few lines of text, the scrollbar start showing.

The requirement here is to automatically increase the height of the textbox to fit the content till a certain maximum height is reached. But how to do it?

One way could be to determine the number of lines and then set the height of the control to number of lines multiplied by the text size. But it is a very crude way and not accurate too. Rather we will discuss a more elegant and fail safe way to achieve this requirement.

To do this I insert a label control on the form. I set the Text and Width property of the label to the Text and Width of the Text Input control. Screenshots below for illustration.

Now comes the important part. The label has a property called Auto height. Go ahead and enable this property.

Remember we are using the Label to adjust the height of the Text input control. So make sure the label is not visible to the end user.

If you are thinking that setting the Label visibility to false shall solve the issue, you are wrong. Once you hide the control the Auto height property of the label won’t work.

For our requirement, set the following properties for the label control

X -> X value of Text input control
Y -> Y value of Text input control
Color -> Transparent
Fill -> Transparent

Finally re-order the control and send it back.

Now coming back to the text input control. Set the height property to a below formula.

What this formula does is to automatically increase the height of the Text Input control based on the height of the label till a maximum of 200. After it reaches 200, the text input control shall start showing a scrollbar.

I have kept it max to 200. You can put any value as per your requirement. All said and done, below is the behavior of the text input control.

As you can see the height of the text input control kept on increasing till the it reached the maximum height of 200 and then it started showing the scrollbar as desired.

Hope this helped. You will also like the below posts.

Debajit Dutta
Business Solutions MVP