moff / angular2-ladda

Angular 2 Ladda module
MIT License
97 stars 20 forks source link

Material 2 with ladda-themeless breaks button #19

Closed ghost closed 4 years ago

ghost commented 7 years ago

I'm trying to use ladda-themeless.min.css with Material 2 bootstrap but now the spinner shows like this. (I used this as reference)

image

theodorejb commented 7 years ago

Can you inspect the element and find out which styles are being changed/overridden by Material?

ghost commented 7 years ago

Will a screenshot of the element help or what's the easiest for me to check them?

ghost commented 7 years ago

Sorry, I made a mistake; the themeless.min.css file wasn't property loaded. The spinner is now working correctly but Material is something funky - on click, it does this ripple effect across the button highlighting the text in white.

image

Would you know how to avoid this?

theodorejb commented 7 years ago

I haven't used Material so I'm not sure what styles it might be changing.

benjamincharity commented 7 years ago

@charliebrink are you hoping to fix the Material ripple when used with Ladda? Or just remove?

If you don't want the ripple, you can add this to the button to disable it disableRipple="true". (see examples here)

If you are looking for help fixing the style issues, a reproduction somewhere would help us debug 👍 . I have successfully integrated material and ladda twice now, but it did require a bit of custom CSS to make .ladda-label fill the parent so the ripple looks correct.

ghost commented 7 years ago

Hi @benjamincharity, I ended up just disabling the ripple, thanks.