Ripple effect fails

[kittykatattack]

Hi!

I'm working on an app with buttons which use the ripple effect.
In one child module, the ripple effect works perfectly, using this code:

Button.render MDL [0] model.mdl
        [ Button.onClick Download 
        , Button.ripple
        , Tooltip.attach MDL [3]
        , css "float" "right"
        ]
        [ text "word" ]

In another child module, the ripple fails using this code:

Button.render MDL [5] model.mdl
        [ Button.ripple
        , Button.raised
        , Button.colored
        , Button.onClick CheckForCompletion
        , css "background-color" "rgb(0, 127, 163)"
        , css "float" "right"
        , css "margin-top" "2em"
        ]
        [ text "Done" ]

(The rest of the button's features work perfectly)

Can anyone suggest where the problem might lie?

[debois]

Could you check to see if it's the `css "background-color"` that's the problem?

[kittykatattack]

I checked again, and removing the css properties has no effect.
I've checked on Chrome, Firefox and IE 10, and the button behaves the same way on all of them.
(The button behaves correctly otherwise, it's strangely, it's just the ripple effect that doesn't work in one child module.)

[debois]

That is, this code fails?

Button.render MDL [5] model.mdl
    [ Button.ripple
    , Button.raised
    , Button.colored
    , Button.onClick CheckForCompletion
    ]
    [ text "Done" ]

If so, could you check that you are not re-using the index [5] elsewhere in the same TEA component (usually Elm module)?

If so, can you provide a link to a github, so I can try to reproduce this?

[kittykatattack]

Here's the link to problematic button in my current work-in-progress:

https://github.com/kittykatattack/adviceForWriters/blob/master/Questions.elm#L410-420

Sorry, it's a bit messy, and I'm not an Elm expert 👶
Yes, I did experiment by changing the index number, button but that had not effect.

[debois]

This is a bug in the getBoundingClientRect emulator: debois/elm-dom#4. A potential fix is given there; however, since proper Elm support for getBoundingClientRect (see above issue) is underway, I'll wait for that rather than hack around on elm-dom.

Workaround.

If a button fails to ripple, find every scrollable ancestor element of that button, and make sure that every such ancestor has explicitly set a CSS position, i.e., position: relative or position: absolute. (An ancestor will be scrollable if, e.g., it has overflow: scroll or overflow: auto.)

In your case, add

 "position" => "relative"

to questionContainerStyle after line 310 in WritingAdvice.elm.

[kittykatattack]

Thank you so much, I really appreciate the help!

[OvermindDL1]

The work-around did not work in my case. See #119 (comment)