Waves.js material animations problem with ionic


#1

Hello, I am trying to use the waves.js material animations with ionic, but when i add it to an ionic project, and put the “waves-effect” class on any item, nothing happenes.

Did anyone succeed in implementing it inside ionic perhaps?

Thanks :slight_smile:


#2

Get the same thing. Nor in Chrome neither on Android/iOS


#3

You should do this:

<span class="waves-effect waves-classic">
    <button class="button"></button>
</span>

Place your button or another clickable element inside other element like span with waves-effect class.
Make sure your clickable element has no margin, if you want margin then add it to the parent element.

@shaulhadar @shoustin


#4

Good catch, anyways I implemented materializecss based on jQuery. Works good, at least from 1st view don’t see performance penalties.


#5

Hi @shoustin , I would be happy to know what exactly you had to edit in materialize, to make it work with ionic?

Any advice would be really welcome.

Thanks :smile:


#6

Mostly its tiny changes, margins, padding … . for example I disabled:

/* 
*, *:before, *:after {
  box-sizing: inherit;   
}*/

that blocks scrolling on mobile Ionic.

Their css structure is pretty simple and you can drop all not relevant components like accordion, text area …


#7

Hello, could you tell me which line was that modificastes to operate materialize


#8

You can check this demo I play with. just open side bar and check all options


#9

I do not understand the example


#10

when running ionic serve disables the scroll is fixed does not scroll effect


#11

you have a tutorial to continue to work materialize in ionic


#12

this example has Ionic infra and also included materialize.


#13

disable this lines in materialize to make scroll work

/*
*, *:before, :after {
box-sizing: inherit;
}
/


#14

hello just disable that line and running ionic serve, do not get the effect of scrolling


#15

The easiest way is to debug with Chrome for Android and Safari for iOS. go To your list and check what styles are inherited from materialize. Just disable them


#16

Hi @shoustin, thanks for these tips, but i have a question, how can you debug live when using chrome on android?

I tried to check it , and i am not sure how to do this… what will be the best way?

Thanks…