DEV Community

Cover image for Power Automate - How to use AutoHeight with Multiline Input Textbox Fields
Frederik Van Lierde
Frederik Van Lierde

Posted on

Power Automate - How to use AutoHeight with Multiline Input Textbox Fields

Let's tackle a common challenge for those working with SharePoint lists, especially when dealing with columns that include multiline text.

If you've ever tried to customize these lists, you've likely noticed that the Input Text control doesn't automatically adjust its height based on the content.

This lack of an autoheight feature forces you to set a fixed height for the control.

The downside?
When there's only a line of text, you end up with an excessive amount of unused space. Conversely, if the text spills over multiple lines, the control introduces scroll bars, making the user experience less than ideal.

This article will showcase a solution that seamlessly displays the entirety of the multiline text in both View and Edit modes, eliminating unnecessary scroll bars.

Additionally, when the text box is empty or contains just a single line, it maintains a minimum height, enhancing the form's overall aesthetics and user friendliness.

The following image shows the standard multiline textbox, containing 1 line in edit mode
PowerApps - Standard Multiline Textbox with 1 lines

The following image shows the standard multiline textbox, containing multiple lines in edit mode, as you can see, the user get a scrollbar, which is not user-friendly
PowerApps - Standard Multiline Textbox with multiple lines

The following image shows the the results after the step by step guide, creating a multiline textbox, containing multiple lines in edit mode, with AutoHeight
PowerApps - Standard Multiline Textbox with multiple lines and AutoHeight

Step by Step Guide

When the multiline field contains 1 or more lines, the following solution will adapt the Input Text Box accordingly

  1. In your SharePoint click Customize Forms to open Power Apps
  2. Select DataCard for the multiline field
  3. Add Label Input to that DataCard
  4. Set the width the same as the Text Input, as well as the X and Y
  5. Set AutoHeight of the Label Input to true
  6. Set Wrap of the Label Input to true
  7. Set Text of the Label Input to Parent.Default
  8. Set Visible of the Label Input to Parent.DisplayMode = Displaymode.View
  9. Set Visible of the Text Input to Parent.DisplayMode <> Displaymode.View
  10. Set Height of the Text Input to Max(lbl.Height + 16, 100)

Top comments (0)