Added ellipsis for long descriptions on list view checklists (#1043)

blackbaud · Sep 7, 2017 · 028d04d · 028d04d
1 parent 3cf8a47
commit 028d04d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/modules/list-view-checklist/list-view-checklist-item.component.scss b/src/modules/list-view-checklist/list-view-checklist-item.component.scss
@@ -22,10 +22,15 @@
     flex: 1;
     position: relative;
     overflow: hidden;
-    text-overflow: ellipsis;
     white-space: nowrap;
     cursor: pointer;
     padding-left: $sky-padding;
+
+    div {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
   }
 
   /deep/ .sky-list-view-checklist-single-button {

diff --git a/src/modules/list-view-checklist/list-view-checklist.component.html b/src/modules/list-view-checklist/list-view-checklist.component.html
@@ -29,8 +29,12 @@
             [checked]="itemSelected(item.id) | async"
             (change)="setItemSelection(item, $event)">
             <sky-checkbox-label>
-              <div class="sky-emphasized" *ngIf="item.label">{{item.label}}</div>
-              <div *ngIf="item.description">{{item.description}}</div>
+              <div class="sky-emphasized" *ngIf="item.label" [attr.title]="item.label">
+                {{item.label}}
+              </div>
+              <div *ngIf="item.description" [attr.title]="item.description">
+                {{item.description}}
+              </div>
             </sky-checkbox-label>
           </sky-checkbox>
         </sky-list-view-checklist-item>