feat(dropdown): truncate long text in dropdown (#551)

allianz · Mar 25, 2022 · 40a53a8 · 40a53a8
1 parent bb2c638
commit 40a53a8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/projects/ng-aquila/src/dropdown/dropdown.spec.ts b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
@@ -560,12 +560,12 @@ describe('NxDropdownComponent', () => {
             dropdownElement.style.width = '200px';
         }));
 
-        it('should use the whole viewport width', fakeAsync(() => {
+        it('should not use the whole viewport width', fakeAsync(() => {
             openDropdownByClick();
             fixture.detectChanges();
             flush();
 
-            expect(getDropdown()!.clientWidth).toBe(document.body.clientWidth - dropdownInstance._overlayViewportMargin);
+            expect(getDropdown()!.clientWidth).toBe(453);
         }));
     });
 

diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.html b/projects/ng-aquila/src/dropdown/item/dropdown-item.html
@@ -14,9 +14,12 @@
 
 <ng-template #contentTemplate>
     <div class="nx-dropdown-results__option-label">
-        <span #content (cdkObserveContent)="_onLabelChange()">
+        <div #content (cdkObserveContent)="_onLabelChange()" [nxTooltip]="viewValue?.length > 35 ? viewValue : null" class="ellipsis">
             <ng-content></ng-content>
-        </span>
-        <ng-container *ngIf="_isContentEmpty(content)"> {{_formattedValue}} </ng-container>
+        </div>
+
+        <div [nxTooltip]="value?.length > 35 ? value : null" class="ellipsis">
+            <ng-container *ngIf="_isContentEmpty(content)"> {{_formattedValue }} </ng-container>
+        </div>
     </div>
 </ng-template>
diff --git a/projects/ng-aquila/src/dropdown/item/dropdown-item.scss b/projects/ng-aquila/src/dropdown/item/dropdown-item.scss
@@ -156,3 +156,10 @@ nx-checkbox {
         }
     }
 }
+
+.ellipsis {
+    max-width: 35ch;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}