-1

I have ons-list as follows:

<ons-list-item modifier="tappable" class="list-item" ng-repeat="item in items" ng-click="onItemSelect(item);">
     <ons-row>
          <ons-col width="105px">
              <img ng-src="{{item.thumb}}"></img>
          </ons-col>
          <ons-col>
          <div class="item-title">
              {{ item.name }}
          </div>
          </ons-col>
          <ons-col>
              <ons-button ng-click="onClick();">Add</ons-button>
          </ons-col>
     </ons-row>
 </ons-list-item>

There is always an effect after tapping on the list and the same thing goes when tapping on Add button.

I wonder is there any way to remove the effect when tapping on Add button on the right-side of the list?

Nakket
  • 620
  • 7
  • 18

1 Answers1

2

To remove the effect when tapping on the "Add" button you should use a modifier on that button like this:

<ons-button modifier="noeffect" ng-click="onClick();">Add</ons-button>

and apply your custom CSS for that button:

.button--noeffect:active{/*Keep the background color the same on tap*/
    opacity:1;
}

Check this codepen.

If you want to remove the tap effect from your list items and you want only the "Add" button to work on tap then delete only: modifier="tappable" from your list items.

OnsenUI has some standard modifiers that can be applied to buttons and list items, but you can also create your own like above.

JcDenton86
  • 933
  • 1
  • 12
  • 32
  • JcDenton86, Appreciated your input. Is it possible to remove tap-effect on ons-list when the Add button is clicked? – Nakket Oct 02 '15 at 06:31
  • Yes, I say in my answer that if you want to remove the tap effect on the list item then remove the `modifier="tappable"` only and leave the rest as is – JcDenton86 Oct 02 '15 at 06:40
  • See this [codepen](http://codepen.io/anon/pen/dYvGbN). Changed so list items are not tappable but the button is – JcDenton86 Oct 02 '15 at 06:58