PowerApps Dropdown Options & Labels Are Cutoff

[Anonymous]

Hi All, 

I have made a PowerApp thats connected to a SharePoint list. My problem arises in the form of the various Choice fields that I've set up are then converted into Dropdown datacards in my PowerApp. Some of my answer choices are quite lnog and end up getting cut off. An example of the problem: 

Is there anyway to change the settings of the dropdown so that the solutions are expanded below rather than just permanetly cut off? I realize that you are able to scroll when the user selects an answer choice, but I want to to have the user be able to view all answers choices prior to choosing one. Also, I'm having the same problem in my Labels of the questions. Can anybody help me expand the cut off dropdown choices and the question labels so that the user can properly view them? Thanks in advance.

[RusselThomas]

Hi robertwinn,

The default dropdown control doesn't have a 'wrap' property that I'm aware of.

You could set the hovertip to the value of the selected item, but then the user would have to first select something, then hover to see what it is - and if they're using a touch screen hovering becomes something of an interesting capability.

You can however build your own 'dropdown' control, which is something I do often, especially for auto-complete dropdowns without resorting to the combobox. 

Disclaimer:  this might be overkill and way too complicated for some - for me it's just fun! 🙂

Also, before you try this longwinded approach, be aware that the dropdown will form part of the datacard - it won't "float" over other cards.  

if you're still keen to try, you may want to create a blank app to practice, or duplicate the current screen and practice on your duplicate before doing it on your original screen.  Here goes;

In your DataCard for the choice column in your Edit form, make a note of your DataCardValue dropdown control name, (I'll just call it DataCardValueN for now - wherever you see DataCardValueX in my code, just replace it with whatever your actual control name is).  You can edit the name and copy it with Ctrl+C as well, just to make things easier.

Unlock the Choice Card and remove/delete the choice dropdown control in it.  (Don't delete the card, just the dropdown control inside).

Resize your card to give you some space to work - don't worry about the size or the invalid name errors that pop up, we'll sort that out later.

With the Card selected (very important :)), insert the following;

• Insert a basic Text Label, format the background white and and border blue like the dropdown control.  Rename the text label to DataCardValueN [remember, replace this with whatever your original DataCardValue name was]
• Insert a square icon and a V icon into the card - these will form the dropdown arrow for your control, so place them next to the text label, colour and size to look like the normal dropdown control
• Insert a ListBox control and place it just under the text label - this will form the dropdown part of your control.

The key to your original question and post is the list box.  It wraps long values.

If it didn't, you could still achieve the same result with a Gallery formatted to look like a list, selection boxes and all, but that's a bit more work - for now let's work with the listbox 🙂

Again, don't worry about the height of your DataCard because of the listbox, we'll sort that out in a bit.

Before we set up the ListBox, and just to reduce the errors popping up while we're building;

Select the V and the rectangle icons, set their OnSelect property as follows;

OnSelect:

UpdateContext({showList: !showList})

Toggles a variable we'll use for the list visibility between true and false.

Now let's set the listbox up;

Select the ListBox control and set the following properties;

OnSelect:

UpdateContext({showList: !showList})

Items:

Choices(YourSharePointList.choiceColumn) 

Populates the listbox with your choices from the SharePoint column

Default:

If(!IsEmpty(ThisItem.choiceColumn.Value), ThisItem.choiceColumn.Value, "")

In case some of your choice column data doesn't current have a choice selected, this makes sets the currently selected value of the ListBox (and therefore the TextLabel as well, see below) to an empty string ""

SelectMultiple: false

We want it to behave like a dropdown, so only one selection at a time.

Visible: showList

Our visibility toggle.

Back to your Text Label DataCardValueN, set;

Text:

If(IsEmpty(ListBox1.SelectedItems), "", ListBox1.Selected.Value)

Again, just to set it blank if there's currently no choice in the data.

Wrap: this is what shows as the result of your selection, so it's up to you - you can leave it as true, or set it to false, whichever looks better.

Now, the listbox will by default form part of your DataCard height but we only want it to do so when it's visible.

To auto-adjust the height of your DataCard, set the Height property as follows;

Choice DataCard:

Height: 

DataCardValueN.Y + DataCardValueN.Height + If(showList, ListBox1.Height, 0)

and the value to write back to SharePoint when you submit the form;

Update:

LookUp(Choices(YourSharePointList.choiceColumn), Value=DataCardValueN.Text)

I think that should be it...reads like a blog post, but hopefully it helps you, if not someone else 🙂

Kind regards,

RT

[Anonymous]

I appreciate you taking the time to write out your solution. I actually tried it out on a different PowerApp and it worked. The only problem is that my original PowerApps has over 80+ dropdown fields and it's a bit unrealisitic for me to create a pseduo dropdown 80+ times, even if I copy paste the template for each question. Thanks for the solution though, and I'm open to other who think they have the solution to my problem. 

[RusselThomas]

Indeed, even knowing the basics and being able to do it fairly quickly - I wouldn't want to do it more than one or two times in an app!

The only thing I can suggest is to post an idea for multi-line/wrap capability in dropdowns.

Good luck!

RT

[v-xida-msft]

Hi @Anonymous,

Thanks for your feedback, I have made a test and the issue is confirmed on my side.

I agree with @RusselThomas's thought almost. If you want to expand the cut off dropdown choices and the question labels within the Combo box control, I afraid that there is no way to achieve your needs in PowerApps currently.

If you would like this feature to be improved in PowerApps, please submit an idea to PowerApps Ideas Forum:

https://powerusers.microsoft.com/t5/PowerApps-Ideas/idb-p/PowerAppsIdeas

Best regards,

Kris

[Chrisk17]

Hi Russel! Thanks for this solution! I was able to create the custom "dropdown" box; however, I'm having an issue where if I put it inside a gallery and click on the arrow/box icons every list box opens. Is there a way to prevent this and only have the selected dropdown/list box open?

Thank you.

Chris

[Chrisk17]

Nevermind. Figured it out... had to use If(ThisItem.IsSelected,showList,) on ListBox Visible.