From e8449e340d558dd586bd9abfd282022084c65340 Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 13 Nov 2017 10:45:16 +0300
Subject: [PATCH] Contact list checkbox rendering broken due to ripple

---
 .../contacts/contact-list/contact-list.component.scss |  6 +++++-
 .../contacts/contact-list/contact-list.component.ts   | 11 ++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
index cde408b4..a2c0009d 100644
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
@@ -1,6 +1,6 @@
 @import "src/app/core/scss/fuse";
 
-:host {
+fuse-contacts-contact-list {
     flex: 1;
 
     .mat-table {
@@ -9,6 +9,10 @@
 
         .mat-column-checkbox {
             flex: 0 1 48px;
+
+            .mat-checkbox-ripple {
+                display: none !important; //fix for broken rendering
+            }
         }
 
         .mat-column-avatar {
diff --git a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
index 25a50e18..e645ba9b 100644
--- a/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
+++ b/src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, OnDestroy, OnInit, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ContactsService } from '../contacts.service';
 import { Observable } from 'rxjs/Observable';
 import { FuseContactsContactFormDialogComponent } from '../contact-form/contact-form.component';
@@ -10,10 +10,11 @@ import { fuseAnimations } from '../../../../../core/animations';
 import { Subscription } from 'rxjs/Subscription';
 
 @Component({
-    selector   : 'fuse-contacts-contact-list',
-    templateUrl: './contact-list.component.html',
-    styleUrls  : ['./contact-list.component.scss'],
-    animations : fuseAnimations
+    selector     : 'fuse-contacts-contact-list',
+    templateUrl  : './contact-list.component.html',
+    styleUrls    : ['./contact-list.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    animations   : fuseAnimations
 })
 export class FuseContactsContactListComponent implements OnInit, OnDestroy
 {