Unable to remove ripple effect from ons-fab

[tbrcrl]

Hello, in my application I am using the most basic onsFab button

<ons-page>
.....
  <ons-fab position="bottom right">
    <ons-icon icon="md-plus"></ons-icon>
  </ons-fab>
</ons-page>

As you can see, the “ripple” attribute is not specified. Nevertheless the ripple effect is present as shown in the attached Chrome dev tool screenshot.

Any idea “who” is inserting the “ripple” attribute and how it is possible to remove it?

Thanks in advance

[munsterlander]

@tbrcrl Interesting because I just copied your code into a codepen and ripple is not added for me. Can you verify if this works on your device or if ripple is added?

https://codepen.io/anon/pen/PbogWE

[tbrcrl]

@munsterlander
Hello, if I run the codepen on a desktop browser the ripple effect is not present
But if I run the codepen on the device (Nexus 5X) the ripple effect is present
You can reproduce the issue without the need of a Nexus 5X device, just run the codepen in the Chrome dev tool and choose Nexus 5 or 5X among the available devices as shown in the attached image

[munsterlander]

@tbrcrl Ok, I was able to find a work around, but there clearly is an issue and I think I have it isolated.

The workaround - codepen has been updated (you can also use querySelector, etc):

ons.ready(function(){           
  document.getElementById('myFAB').removeAttribute('ripple');
});

The fix:

I believe there is an unnecessary call to this._updateRipple(); in the ons-fab.js component on line 94. I would think this should be in the case statement validating if ripple exists. Definitely something that should be looked at.

[Fran Diox]

@tbrcrl @munsterlander Autostyling is automatically adding ripple effect to ons-fab and ons-button for Material Design. You will find ripple in these components in Android device and also in Chrome if you use developer tools and select a Nexus view. You can avoid autostyling for these components by adding disable-auto-styling attribute. It won’t be styled as Material Design automatically either so you will need to add modifier="material" manually.

[munsterlander]

@Fran-Diox This is somewhat confusing in the docs then. I get that auto-styling is adding material for Android and I know ripple is part of the material design, but with the docs explicitly stating ripple as optional it makes it seem as though ripple is not enabled by default. Since it is a default, then there should be some clearer explanation about disabling the auto-style, because this is not necessarily intuitive but works very well!

<ons-fab position="bottom right" disable-auto-styling>
    <ons-icon icon="md-plus"></ons-icon>
  </ons-fab>

So after reviewing the docs a bit more, obviously the disabling of the styles is clarified here: https://onsen.io/v2/docs/guide/js/#cross-platform-styling

I wonder if there is a way in the reference docs to add a reminder of this.

[tbrcrl]

@munsterlander @Fran-Diox
I tryed the disable-auto-styling attribute and it works fine.
I agree with @munsterlander about the need to update the documentation both in
https://onsen.io/v2/docs/js/ons-ripple.html
and
https://tutorial.onsen.io/?framework=vanilla&category=Reference&module=ripple
as in both cases, on page 3/3, it is stated that "for the element the support the ripple attribute,

<ons-button>
<ons-fab>
<ons-speed-dial-item>
<ons-list-item>

adding a ripple effect is very simple

<ons-button ripple>
  Tap me!
</ons-button>

I suggest to add what @Fran-Diox stated i.e. “Autostyling is automatically adding ripple effect to ons-fab and ons-button for Material Design”.

Thanks again for the promt answer.