Auto Width of any controls

[jbrit2020]

So, after spending days scratching my head on how to make a label width adjustable, and extremely unhappy with the formula:

20*Len(Label1.Text)

That increases the size, but doesn't really match THE size of the text (the label can end up being 4 or 5 times the size of the text)

I started fiddling with Point conversions and came up with this formula. You don't need to change the 0.352777777778 value as that is the average point value in millimetres of font size systems:

Max(25,((Label1.Size+(0.35277777777778*Label1.Size))*Len(Label1.Text))-((0.35277777777778*Len(Label1.Text))*(Len(Label1.Text))))

Doesn't look pretty, and probably have one too many () in there, but it seems to work wonders for me as it matches NEARLY perfectly the width of the TEXT.

I'm just posting it here because it seems to be a common question and thought someone could make use of this or hopefully even, improve the formula to be slicker.

Please do test and let me know if it works for you as well.

[Rohit_RC]

Hi @jbrit2020 , you can use auto-height property of Text label control, it will auto increase the height based on the length of text entered

[Lexicon_320]

This didn't work for me. I assume it's meant to go in the Width property since we're trying to auto-width our labels to match its contents. I changed all the Label1 references to Self.

Max(25, ((Self.Size+(0.35277777777778*Self.Size))*Len(Self.Text))-((0.35277777777778*Len(Self.Text))*(Len(Self.Text))))

My label at font size 10, length 41 requires a width of 230 to fit all the text in one line, but the formula maxes out at 25 because the second part calculates to a negative number (-38).

Yet another one (font size 12, length 73) requiring a width of 567 calculated to -695.

Have I severely misunderstood this post?

[Anonymous]

Works just perfectly!! Thank you 🙂

[SSAEDW]

...

[mdevaney · Accepted solution]

@jbrit2020 
The best way to make an auto-width label is:

• Place an HTML control on the canvas with the same font, font size and font weight
• Set the Auto-Height property to true
• Rotate text 90 degrees using CSS
• Make the label width equal to the height of the HTML control

I show all the steps to do it in this tutorial:
https://www.matthewdevaney.com/how-to-make-a-power-apps-auto-width-label/

[Anonymous]

This worked for me: 
1. Select the label you would like to auto-width

2. Go to the toolbar for this element

3. Find Width in the dropdown

4. Enter this  Value(Len(Self.Text)*14)

You can adjust the number 14 to any number depending on the width of your font.

[Anonymous]

Here's a workaround I came up with that is pretty accurate. Just copy and paste this formula into the Width of the label you want to auto-size. Unfortunately though, this specifically only works with the following conditions (still working on a way to include all the extra variables):

*Only includes the 95 characters found on a keyboard
*font-type: 'Open Sans'

*font-weight: Normal

*font-style: none

(RoundUp(
  ((CountRows(MatchAll(Self.Text, "m"))
  +CountRows(MatchAll(Self.Text, "M"))
  +CountRows(MatchAll(Self.Text, "W")))
  *(Self.Size-(Self.Size*-0.25))) //m,M,W
  +
  ((CountRows(MatchAll(Self.Text, "\@"))
  *(Self.Size-(Self.Size*-0.2)))) //@
  +
  ((CountRows(MatchAll(Self.Text, "N"))
  +CountRows(MatchAll(Self.Text, "O"))
  +CountRows(MatchAll(Self.Text, "Q")))
  *(Self.Size-(Self.Size*-0.05))) //N,0,Q
  +
  ((CountRows(MatchAll(Self.Text, "\%"))
  *(Self.Size-(Self.Size*-0.1)))) //%
  +
  ((CountRows(MatchAll(Self.Text, "D"))
  +CountRows(MatchAll(Self.Text, "G"))
  +CountRows(MatchAll(Self.Text, "H"))
  +CountRows(MatchAll(Self.Text, "U"))
  +CountRows(MatchAll(Self.Text, "\&")))
  *(Self.Size-(Self.Size*0))) //D,G,H,U,&
  +
  ((CountRows(MatchAll(Self.Text, "w"))
  *(Self.Size-(Self.Size*0.05)))) //w
  +
  ((CountRows(MatchAll(Self.Text, "B"))
  +CountRows(MatchAll(Self.Text, "\#")))
  *(Self.Size-(Self.Size*0.1))) //B,#
  +
  ((CountRows(MatchAll(Self.Text, "b"))
  +CountRows(MatchAll(Self.Text, "d"))
  +CountRows(MatchAll(Self.Text, "h"))
  +CountRows(MatchAll(Self.Text, "n"))
  +CountRows(MatchAll(Self.Text, "o"))
  +CountRows(MatchAll(Self.Text, "p"))
  +CountRows(MatchAll(Self.Text, "q"))
  +CountRows(MatchAll(Self.Text, "u"))
  +CountRows(MatchAll(Self.Text, "A"))
  +CountRows(MatchAll(Self.Text, "C"))
  +CountRows(MatchAll(Self.Text, "K"))
  +CountRows(MatchAll(Self.Text, "P"))
  +CountRows(MatchAll(Self.Text, "R")))
  *(Self.Size-(Self.Size*0.15))) //b,d,h,n,o,p,q,u,A,C,K,P,R
  +
  ((CountRows(MatchAll(Self.Text, "V"))
  +CountRows(MatchAll(Self.Text, "X"))
  +CountRows(MatchAll(Self.Text, "Z"))
  +CountRows(MatchAll(Self.Text, "0"))
  +CountRows(MatchAll(Self.Text, "1"))
  +CountRows(MatchAll(Self.Text, "2"))
  +CountRows(MatchAll(Self.Text, "3"))
  +CountRows(MatchAll(Self.Text, "4"))
  +CountRows(MatchAll(Self.Text, "5"))
  +CountRows(MatchAll(Self.Text, "6"))
  +CountRows(MatchAll(Self.Text, "7"))
  +CountRows(MatchAll(Self.Text, "8"))
  +CountRows(MatchAll(Self.Text, "9"))
  +CountRows(MatchAll(Self.Text, "\~"))
  +CountRows(MatchAll(Self.Text, "\$"))
  +CountRows(MatchAll(Self.Text, "\+"))
  +CountRows(MatchAll(Self.Text, "\="))
  +CountRows(MatchAll(Self.Text, "\<"))
  +CountRows(MatchAll(Self.Text, "\>")))
  *(Self.Size-(Self.Size*0.2))) //V,X,Z,0,1,2,3,4,5,6,7,8,9,~,`,$,+,=,<,>
  +
  ((CountRows(MatchAll(Self.Text, "a"))
  +CountRows(MatchAll(Self.Text, "e"))
  +CountRows(MatchAll(Self.Text, "g"))
  +CountRows(MatchAll(Self.Text, "E"))
  +CountRows(MatchAll(Self.Text, "S"))
  +CountRows(MatchAll(Self.Text, "T"))
  +CountRows(MatchAll(Self.Text, "Y"))
  +CountRows(MatchAll(Self.Text, "\^"))
  +CountRows(MatchAll(Self.Text, "\*"))
  +CountRows(MatchAll(Self.Text, "\|")))
  *(Self.Size-(Self.Size*0.25))) //a,e,g,E,S,T,Y,^,*,|
  +
  ((CountRows(MatchAll(Self.Text, "k"))
  +CountRows(MatchAll(Self.Text, "v"))
  +CountRows(MatchAll(Self.Text, "x"))
  +CountRows(MatchAll(Self.Text, "y"))
  +CountRows(MatchAll(Self.Text, "F"))
  +CountRows(MatchAll(Self.Text, "L")))
  *(Self.Size-(Self.Size*0.3))) //k,v,x,y,F,L
  +
  ((CountRows(MatchAll(Self.Text, "c"))
  +CountRows(MatchAll(Self.Text, "s"))
  +CountRows(MatchAll(Self.Text, "z")))
  *(Self.Size-(Self.Size*0.35))) //c,s,z
  +
  ((CountRows(MatchAll(Self.Text, "_"))
  +CountRows(MatchAll(Self.Text, "\?")))
  *(Self.Size-(Self.Size*0.35))) //_,?
  +
  ((CountRows(MatchAll(Self.Text, "r"))
  +CountRows(MatchAll(Self.Text, "\{"))
  +CountRows(MatchAll(Self.Text, "\}"))
  +CountRows(MatchAll(Self.Text, "\""")))
  *(Self.Size-(Self.Size*0.45))) //r,{,},"
  +
  ((CountRows(MatchAll(Self.Text, "f"))
  +CountRows(MatchAll(Self.Text, "t"))
  +CountRows(MatchAll(Self.Text, "\\"))
  +CountRows(MatchAll(Self.Text, "\/")))
  *(Self.Size-(Self.Size*0.5))) //f,t,\,/
  +
  ((CountRows(MatchAll(Self.Text, "\-"))
  +CountRows(MatchAll(Self.Text, "\["))
  +CountRows(MatchAll(Self.Text, "\]")))
  *(Self.Size-(Self.Size*0.55))) //-,[,]
  +
  ((CountRows(MatchAll(Self.Text, "I"))
  +CountRows(MatchAll(Self.Text, "J"))
  +CountRows(MatchAll(Self.Text, "\!"))
  +CountRows(MatchAll(Self.Text, "\("))
  +CountRows(MatchAll(Self.Text, "\)"))
  +CountRows(MatchAll(Self.Text, "\:"))
  +CountRows(MatchAll(Self.Text, "\;"))
  +CountRows(MatchAll(Self.Text, "\.")))
  *(Self.Size-(Self.Size*0.6))) //I,J,!,(,),:,;,.,,,`
  +
  ((CountRows(MatchAll(Self.Text, "i"))
  +CountRows(MatchAll(Self.Text, "j"))
  +CountRows(MatchAll(Self.Text, "l"))
  +CountRows(MatchAll(Self.Text, " "))
  +CountRows(MatchAll(Self.Text, "\,")))
  *(Self.Size-(Self.Size*0.65))) //i,j,l,,
  +
  ((CountRows(MatchAll(Self.Text, "\'")))
  *(Self.Size-(Self.Size*0.7)))
  , 0))

[KRider]

For bigger applications this would add an unnecessary control. I think a math solution is perfect. 

Since this post have you seen any other solutions?

[SanSha]

Following worked for me for auto-width with font size accounted for. Tested only with labels and on PC, please confirm with other controls and devices

Len(Self.Text)*(Self.Size * 0.7)