Input field and popover in one row

ionic-v1
1

Hello,

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][1] for my 4 approaches, all of which have a flaw so I cannot use them.

  1. The select control is ugly and does not work properly on my Tablet (Android 4.4.2)
  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.
  3. In the browser I can prevent this by using ng-mousedown instead of
    on-tap. However on the phone, the behavior remains the same
    (keyboard opens)
  4. 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?
[1]: http://codepen.io/tbltzk/pen/aOVNBK

2

Finally I found a solution that sufficiently works for my needs.
Approach 5 is a modification of approach 4, setting the width of the input and the anchor explicitly.
Two additional notes on that:

  • “col-80” and “col-20” did not work on my phone (android 4.0.3) - no effect
  • width:80% and width:20% somehow render to a slightly smaller row than 100%. Setting the second column to 22% fits roughly on my phone, while the browser and my tablet make a perfekt cut to 100%.