diff --git a/demo-shell/src/app/components/datatable/datatable.component.ts b/demo-shell/src/app/components/datatable/datatable.component.ts index 16e6a48c5f..b8786ce47d 100644 --- a/demo-shell/src/app/components/datatable/datatable.component.ts +++ b/demo-shell/src/app/components/datatable/datatable.component.ts @@ -87,7 +87,12 @@ export class DataTableComponent { }, { id: 2, - name: 'Name 2', + name: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum.`, createdOn: new Date(2016, 6, 2, 15, 8, 2), createdBy: this._createdBy, icon: 'material-icons://accessibility' @@ -111,7 +116,7 @@ export class DataTableComponent { { type: 'image', key: 'icon', title: '', srTitle: 'Thumbnail' }, { type: 'text', key: 'id', title: 'Id', sortable: true , cssClass: 'adf-ellipsis-cell' }, { type: 'text', key: 'createdOn', title: 'Created On', sortable: true, cssClass: 'adf-ellipsis-cell adf-expand-cell-5' }, - { type: 'text', key: 'name', title: 'Name', cssClass: '', sortable: true }, + { type: 'text', key: 'name', title: 'Name', cssClass: 'adf-ellipsis-cell', sortable: true }, { type: 'text', key: 'createdBy.name', title: 'Created By', sortable: true, cssClass: ''} ] ); diff --git a/lib/core/datatable/components/datatable/datatable.component.scss b/lib/core/datatable/components/datatable/datatable.component.scss index 033a488795..e17475b161 100644 --- a/lib/core/datatable/components/datatable/datatable.component.scss +++ b/lib/core/datatable/components/datatable/datatable.component.scss @@ -370,9 +370,9 @@ } .adf-ellipsis-cell { - overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + position: sticky; .adf-datatable-cell, .adf-datatable-cell-header { overflow: hidden; @@ -387,6 +387,8 @@ white-space: nowrap; display: block; width: calc(100% - 2em); + position: absolute; + margin-top: -10px; } }