I’m trying to have an input field (type=“number”) for a money amount and a drop down or popover next to each other in one row.
See this [code pen] for my 4 approaches, all of which have a flaw so I cannot use them.
- The select control is ugly and does not work properly on my Tablet (Android 4.4.2)
- When I click on the currency item (which opens the popover), the
input field simultaneously gets the focus. This is no problem in the
browser, but on the phone, this activates the keyboard.
- In the browser I can prevent this by using ng-mousedown instead of
on-tap. However on the phone, the behavior remains the same
- Putting the row directive around the label instead of inside almost
works. But then the whole row does not use the full width
(style=“width:100%”) did not work.
Additional Info to approaches 2 and 3. I also experimented with $event.stopPropagation() and $event.preventDefault() - with no effect.
I’m really stuck now. Any ideas?