On Android ComboBox pulldown covers whole screen, first selected tag irritating

[SaWu]

Hello.

Please be so kind as to read my full post before responding.
Thank you for your consideration.

I am using ComboBoxes in my PowerApps.
However, those look and behave differently in PowerApps Studio/Maker in the browser in Windows than in the PowerApps App in mobile devices, primarily tested with 2 Android devices.

In PowerApps Studio the ComboBox basically looks like a DropDown:

Drop down in PowerApps StudioCombo box in PowerApps Studio

However, expanding the same ComboBox in the same App on my Android device yields:

PS: Yes, there is a lot of white empty space here from the Android screenshot, because the expanded ComboBox always expands to this whole screen covering size (irrespective of any control property, in particular, the number of items)

ComboBox in PowerApps App on Android, no selection madeComboBox in PowerApps App on Android, 2 items were selected before expanding control

I have two issues, questions regarding this:

1. The expanded ComboBox on Android is something else entirely from the Studio experience. My boss told me it's ugly as ...
   
   
2. In the screenshots I have circled in red the by default-first-focused-on selection tag. This is displayed using HoverColor/HoverFill (different from Color/Fill or SelectionColor/SelectionFill) to show that it's selected. This allows the ComboBox to be used with a keyboard, to press enter to unselect items, and arrows to navigate, and show where the keyboard navigation is currently at. I understand this.
   
   However, on the mobile device, it is displayed the same way.
   There I find this display of one element in a different color irritating because there is no functional reason to do so unless every mobile device comes with a keyboard or arrow buttons.

Tested with
PowerApp: Modified, 5/28/2019, 5:22:59 PM, PowerApps Relase 3.19052.19

Android: PowerApps App version 3.19052.19

Session ID: 6eca22ea-0e44-4b7d-8a7f-807d958352f5

Thank you,
    Sa.

[RabbyC]

Hi SaWu,

I have tested on my devices, and I had not noticed before, but that is also the behaviour I am getting, I think it is by design.

If you change the padding sizes of the combo box, does it change the way it looks at all?

Regards

Rob

[SaWu]

Hi @RabbyC 

I am aware that this is not a bug but just the current design/implementation of the PowerApps App.
I am complaining about this particular design/implementation.

If I change the padding of the combobox, the shown elements change, but not the overall ugly white drop down.
Here's an example multiplying the left padding with 10 and top padding with 5.

The items moved to the right and down but the overall thing still covers basically the whole screen.

Greetings,
   Sa.

[RabbyC]

yeah, same, I did read somewhere, they are overhauling the studio and changing a load of stuff in Microsoft Fabric, so fingers crossed, they may fix it, but you're right, it does look amatuerish right now... I dont think there are any work arounds either.

[AnthonyPSlalom]

Hate to necro a 3 year old thread... but this is still a problem.  Does anyone have a workaround or solution?

[TxTechnician]

The work around would be to create a pseudo dropdown menu by using a gallery instead.  You could control how large a gallery's width is.  So it would:

1. Create a button with a variable to be on/off when selected. 

If(var=True,Set(var,False),Set(var,True))​

• Create the gallery and change the on select to set a variable with the name of the gallery item:

On Select:  Set(varMyDropDownItem, ThisItem)​

Set the gallery to be visible based on the variable controlled by the button:

Visible:  var  (the property for a control's "Visible" paramater is a true/false statement.  So setting its visible property to be a boolean variable's value is the same as typing "True" or "False")

• For user feedback it would be a good idea to set the Text of the Button to be the selected variable:

Text = varMyDropDownItem​

YSK:  The combobox's behavior is like that for a reason.  Mobile interfaces are wildly different.  Test your app using your web browser's built in development tool, and preview it in mobile.

[AnthonyPSlalom]

FWIW: A gallery can't be embedded in a form, and the dropdown component doesn't have this problem.  Looks like I may be ripping out the form and creating a custom UI with a patch statement.

[TxTechnician]

Here's a tip for doing that.  Just hide the already built form.  Set all of the update fields of that form to be variables. 

Create a bunch of input fields.  And a "submit" button. 

Set the "OnSelect" property to be:

Concurrent(Set(var1,TextInput1.Text),Set(var2,TextInput2.Text),...,...etc); SubmitForm(Form1)

Then set the onsucess of the form to initialize all of the variables.