Answered

PowerApps dropdown width based on Item width

(0) Share

Report

Posted on by ImaKickUrAsh

I have a cascading dropdown control in a canvas app (no form) that has items set by other dropdowns, so the items are not static.

Is there a way to set the width of the dropdown control to be dynamic based on the width of the widest item in the list? I tried putting the dropdown control in an container & using flexible width but it makes the dropdown overly wide & looks terrible.

Example:

dropdown control name: ddPickMe

Items

Apple

Orange from a Treetop

Banana

What formula could I use in ddPickMe.Width to widen the control to accommodate the width of "Orange from the a Treetop" as a selection?

Categories:

General Questions

I have the same question (0)

All responses (5)

Answers (1)

joyle Microsoft Employee on at

Like (0)

Report
Re: PowerApps dropdown width based on Item width

A similar questions has been answered here: Solved: Changing another object property with a button/ im... - Power Platform Community (microsoft.com)

Basically, set a context variable, set the Dropdown.Width property with it and then call the UpdateContext function from where you want to trigger the action (probably from OnChange).

UpdateContext({ custom:Len(Dropdown2.SelectedText.field1) })

Was this reply helpful? Yes No
Sundeep_Malik 6,484 on at

Like (0)

Report

Re: PowerApps dropdown width based on Item width

Hey @ImaKickUrAsh

So, I tried to replicate your situation in my app.

I took a dropdown. In that I took some values ["Apple","Banana","Orange from a Treetop","Photosynthesis"]

Now see whatever is the width of the dropdown when you select the biggest field. So above Orange from a treetop is the biggest. 240 width was fitting for this. Now I saw the width for apple. It was about 100.

So, if we see the length of apple it is 5. If we multiply 5 by 20 it is equal to 100. So likewise I thought in width property we can do that.

Now in the width property I wrote this expression:

If(Len(Dropdown3.SelectedText.Value)*20>240,240,Len(Dropdown3.SelectedText.Value)*20)

So this checks if the product of length and 20 of whatever is selected in dropdown goes above 240, then I will take the width of dropdown to 240 which is equal to my biggest value in the dropwdown. And if it is less than 240 it will automatically take width of whatever is selected.

Output:

So, if you like this approach you can apply it.

I hope this helps 🙂

Was this reply helpful? Yes No
Verified answer

Sundeep_Malik 6,484 on at

Like (0)

Report

Re: PowerApps dropdown width based on Item width

@ImaKickUrAsh

I just added Bye in the dropwown. For this it wasnt showing a good width.

For this I modified the formula to:

If(
Len(Dropdown3.SelectedText.Value) * 20 > 240,
240,
If(
Len(Dropdown3.SelectedText.Value) * 20 < 80,
80,
Len(Dropdown3.SelectedText.Value) * 20
)
)

Was this reply helpful? Yes No
R Bakker 725 on at

Like (0)

Report
Re: PowerApps dropdown width based on Item width

Apply to the width property of dropdown.
100+Len(Self.Selected.Value)*5

Was this reply helpful? Yes No
ImaKickUrAsh 51 on at

Like (1)

Report

Re: PowerApps dropdown width based on Item width

Thank you Sudeep, I had to modify it a bit but your solution gave me the start I needed!

If(
Len(Self.SelectedText.Value) * 20 > 240,
Len(Self.Selected.Value) + 50 * 6,
300
)

Still would be cool to be able to get the Len from the longest Len item in the dropdown before having to select something though so instead of setting the dropdown with no selection to 300, it could default to the largest Len item!

Was this reply helpful? Yes No