Removing the ripple effect from mdc checkbox

Question

I am trying to remove this ripple effect from angular material checkbox, since I have a long list, and I want list rows to be as close as possible, ripples overlap with other checkboxes.

Current code is:

  render() {
    return (
      <div class="mdc-form-field">
        <div class="mdc-checkbox">
          <input
            type="checkbox"
            class="mdc-checkbox__native-control"
            disabled={this.disabled}
            checked={this.isChecked}
            onChange={this.onChangeAction}
          />
          <div class="mdc-checkbox__background">
            <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
              <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
            </svg>
            <div class="mdc-checkbox__mixedmark" />
          </div>
        </div>
      </div>
    );
  }

and from inspecting the @material/checkbox (version 3.2.0), I see that there is a mixin

@mixin mdc-checkbox-without-ripple($query: mdc-feature-all())

which I am not sure how to use, because when I include it, it just doesn't work. Is there a way to remove the ripple by some class, which I overlooked in the library?

Awais · Answer 1 · 2019-11-20T13:27:10.480

0

Try this

.mdc-checkbox .mdc-ripple-surface.mdc-ripple-upgraded:after {
    display: none !important;
}

OR

.mdc-checkbox__ripple{
    display: none !important;
}

edited Nov 20 '19 at 13:27

answered Nov 14 '19 at 12:33

Awais

4,752
4
17
40

@user6537157 try setting this `.mdc-checkbox__ripple` to `display:none` – Awais Nov 20 '19 at 13:26
Nope, only this works for me https://stackoverflow.com/a/58955389/6537157 – akop Nov 20 '19 at 13:57
Which version of angular-material did you use (maye is here the problem with us)? :D – akop Nov 20 '19 at 14:00
latest on i am not sure about it – Awais Nov 20 '19 at 14:15

akop · Answer 2 · 2019-11-20T14:08:56.197

0

Maybe you have to use a other selector (Iam dont using the class-selector).

mdc-checkbox {
  --mdc-ripple-fg-size: 0 !important;
}

Edit

Seems that this only works with "@angular-mdc/web": "3.2.1"

edited Nov 20 '19 at 14:08

answered Nov 20 '19 at 13:21

akop

5,981
6
24
51

Removing the ripple effect from mdc checkbox

2 Answers2

Edit