Buttons inside form labels

ionic-v1
1

I have a form like below,

<form>
    <div class="list">
        <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text">
        </label>
        <label class="item item-button-right">
            Photo
            <button style="right: 95px;" class="button button-small button-clear" ng-click="get_gallery();">
                Gallery
            </button>
            <button class="button button-small button-clear" ng-click="get_camera();">
                Camera
            </button>
        </label>
    </div>
</form>

The Problem is that whatever the button I hit, it always triggers get_gallery() method and never calls get_camera(). Can you someone help me what is the problem? I have also tried in other way which will look like,

<label class="item item-input item-stacked-label">
    Receipt
   <div>
        <button class="button button-small button-clear" ng-click="get_gallery();">
            Gallery
        </button>
        <button class="button button-small button-clear" ng-click="get_camera();">
            Camera
        </button>
    </div>
</label>

Am I doing something wrong? What is the proper way to do it?

2

Have you tried to stop the event propagation?

ng-click="get_camera(); $event.stopPropagation();"
1 Like
3

I’m facing a similar problem. Even when using various combinations of prevent bubbling and propagation, it’s just impossible to fire a click event on a button or icon that is to the right of an item.

Sample:

http://play.ionic.io/app/e0996f31ffaf

Any solutions out there? Am I missing the obvious? I primarily need an input with a button right that is clickable. I can resort to majorly restyling an item-input-inset but think it shouldn’t be necessary.

UPDATE: I’ve got the ‘Simple Item Button Right’ working now for both test cases.
UPDATE 2: The “fix” for the Simple Item Button Right actually breaks the click event on just the item.

FYI: The “official” answer from @Ionitron himself seems to be, “Don’t do this”. https://github.com/driftyco/ionic/issues/2311#issuecomment-74161442

FINAL UPDATE: Thanks to a co-worker, this is now working. The solution is simply not to use a label for the item. Instead just use a div. See the “FINAL SOLUTION”

4

Thank you Calendee! I tried forever to do this and finally changing the label to a div solved my issue. Why even have label? They should remove it from the docs :p. I’m super frustrated but thanks for solving it for me!

5

Hi Calendee,

I am curious why label would result in a behavior like this. Do you know why? Or point us to a direction.
I checked ionic 0.9.27 version, this works fine, but after 1.1.0, this behavior occurs.
CodePen is here
Anyway, thanks very much for this solution.

6

The label in Ionic is used to capture the tap and trigger focus on an input field. So, it prevents tapping anything else.

3 Likes
7

Yes, it did work for me too. Div instead of a label, i was scratching my head on this to create a X clear button.

<a ng-show="search.length" ng-click="search=''">
    <i class="icon ion-close placeholder-icon"></i>
</a>
1 Like