Series: How to build Power Apps that don't look like Power Apps - auto-height textinput - Material Design part 3
Some controls in Power Apps do not have an auto height property, which means that we can’t get the Height of a control to automagically ✨ adjust to its content. Especially for the textinput control, this is a real bummer, as we a user’s input a pretty much unpredictable. On the one hand, we do not want to waste precious screen estate by making the box as big as possible, on the other hand, a too small box will result in an endless scrollbar which is a bad user experience.
This is part 3 of How to build Power Apps - that don’t like Power Apps. If you didn’t read part 1 or part 2 yet, this is your chance to catch up :-) We will again use guidance from Material Design
Build a component with me
If you follow my blog posts then you might know that I love to componentize everything that I’d like to use again, and an auto-height textinput seems to tick that box as well.
- Open make.powerapps.com
- Create a new component
- Create a custom input property outsideMargin (Number),
20- determines the margin around the component
- Create a custom output property userText (Text),
txt_userInput.Textso that we can pass this value back to our app
Make magic work
- Insert a text label
lbl_autoHeightHelperand a textinput
- Make sure that the textinput sits on top
- Set the Mode of the textinput to
- Set the X and Y of the textinput to
- Set the Width of the textinput to
cmp_textinput.Width-2*cmp_textinput.outsideMargin- this makes sure, that when you horizontally resize the component, this also applies to the textinput as well
- Set Height of the textinput to
- Set the Text of the text label to
- Set X of the text label to
txt_userInput1.Xand Y to
- Set Width of the text label to
- Set the Height of the text label to
- Set the auto height of the text label to
- Set the Color of the text label to
- For the text label, set Font to
txt_userinput.Font, FontWeight to
txt_userinput.FontWeight, and Size to
- Set the Width of the text label to
txt_userInput.Widthand the Height to
Understand the magic
- We utilize the auto height property of the text label and hook it to the Height property of the text input. The text label will get exactly the text in the Font, Size, FontWeight of the textinput, but as we set the Color to
Transparent, it won’t show up.
- For the Width of the text input, we reference the width of the component itself so that we can make the textinput as wide as necessary by adjusting the size of the component instance in an app
Max(42, lbl_autoHeightHelper.Height)for the Height of the textinput ensures that we always have 42 as a minimum Height and the Height of the text label (which has auto height enabled) as maximum Height
Feedback and what’s next
a little hack to bring auto-height to controls that don’t come with it out of the box. Let me know what you think on twitter or in the comments below!
Maybe you could spot in the screenshot above, that I added some more cool features to my component, such as a trailing icon (delete, error), a label, an asterisk. a helper and an error text, and an indicator of how many characters are still left. This is a sweet sneak preview on a Material design component library that I am building together with my dear friend and partner in crime Robin Rosengrün.
First published on m365princess.com