Button next to an input not clickable

I updated iconic from beta 1 to 4.
And then the getVCode is never called when I click the button.

<div class="list">
          <label class="item item-input item-button-right">
          <span class="input-label">code</span>
          <input type="text" placeholder="please input your code" ng-model="vcode">
          <button class="button button-positive" ng-click="getVCode()">
            get your code
          </button>
        </label>
</div>

ps. I am not sure what is the right way associating a button to an input.
The code above still has another issue, that is, when you enter a long text in the input,
the right part of the text is under the button.

Do you mind putting this in a codepen?

I am new here. But of course not.
Here it is: http://codepen.io/anon/pen/zeagF

As you can see, the initial code is shown under the button.
And when you click the button, the code does not change, while it works in beta 1.

You code was a little off.

        <div class="list">
          <div class="item item-input-inset">
            <span class="input-label">code</span>
            <label class="item-input-wrapper">

              <input type="text" placeholder="Code"  ng-model="vcode">
                </label>
              <button class="button button-positive" ng-click="getVCode()">
                get your code
              </button>
              </div>
          </div>

Your button was getting lost because it was being overlapped by the label

Thanks a lot.
It seems that “item-input-inset” is indispensable here, and it makes my view a little weird.
But it is OK.
However, when I tried it on my device, I found the button is not located next to the right border.
There is a big gap between the button and the right border.
My android version is 4.0.4

Your solution does not work in beta.5.
I guess the button is still overlapped by the label.

Hmm I just updated the codepen to the nightly builds and it works.
http://codepen.io/mhartington/pen/oBwln

So quick. Nice. Thank you!

Maybe I should create another topic, but it is quite related.

I just tested your code on my phone.
When in portrait orientation, the button is half-shown.
The right half part of the button is out of view.
While in landscape orientation, everything is fine.

Meanwhile, the gap between the label and the input is unnecessarily huge.
Can I set the gap?

Lets open a new post for this. Can you include your version of ionic, device, device version, and your meta tag? Also, can you install the ionic keyboard plugin?

I just installed the keyborad plugin. But the problem is still there.
I am using ionic 1.0.0 beta 5.
My android device: 4.0.4
The meta tag: <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

I have similar issue.
One list with Barcode, Size and Color. Next input of barcode, I want to add one button to enable Barcode scanning using Cordova plugin. But it seems that the data changed in $scope won’t be reflected for input element. :frowning:

Just as in your example.


After click the button, then change the content of the code. Then re-click the button. The code won’t change. :frowning:

Interesting, seems this maybe an ionic issue or have something to do with the change in angular.

Would you mind posting your codepen and then my plunker in an issue?

http://ionicframework.com/submit-issue/