Design of pull down select broken on mobile

🐜 Bug report

about: Short explanation 🔧

The pull down select on the monitoring setup page looks broken on mobile

1. The listbox is visible above the textbox even before it's clicked
2. The listbox appears above the textbox, even though there's not enough space

I'm seeing this behaviour on

• iOS device

• Android device

• Chrome

• Firefox

• Safari

• Edge

• Other

What is the expected behaviour?

1. Before the textbox is clicked, the listbox should not be visible
2. The listbox should only render above the textbox if there is enough space above
3. Scrolling on mobile causes the dropdown to close

What is the actual behaviour?

Steps to Reproduce

Example:

1. Open the app
2. Go to the monitoring setup

Screenshots

Files

pull-down-select.component.ts

Any possible solutions?

1. Set the height of the listbox also to 0px when it's collapsed
2. Currently we're calculating the height below the textbox, to see if we should render the listbox above. We should also calculate the height above the textbox, to see if we're able to show it there. If there's neither enough space above or below, we should default to showing it below.
3. If the former is not possible, a quick fix would just be to remove the logic to show the listbox above the dropdown altogether