[ADF-1615] Datatable - The ellipsis class doesn't work for a custom template (#2398)

* Added ellipsis property for data-column rendered using custom html template
This commit is contained in:
madhukar23
2017-09-29 16:12:23 +01:00
committed by Eugenio Romano
parent 809e14d641
commit 016e786531
10 changed files with 137 additions and 47 deletions
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -2002,6 +2002,10 @@ input.mat-input-element {
position: relative; position: relative;
top: 5px; } top: 5px; }
.adf-analytics-report-list .activiti-filters__label {
white-space: nowrap;
overflow: hidden; }
.adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content { .adf-analytics-report-list .mat-nav-list .mat-list-item .mat-list-item-content {
line-height: 48px; } line-height: 48px; }
@@ -2324,8 +2328,6 @@ container-widget .mat-grid-tile {
.adf-datatable /deep/ table { .adf-datatable /deep/ table {
border: none !important; } border: none !important; }
.adf-datatable /deep/ table thead {
display: none; }
.adf-datatable /deep/ table tbody td { .adf-datatable /deep/ table tbody td {
padding: 0px !important; padding: 0px !important;
border-top: none !important; } border-top: none !important; }
@@ -2712,14 +2714,21 @@ adf-people-list /deep/ adf-datatable /deep/ .people-pic {
/* cell stretching content */ } /* cell stretching content */ }
.adf-data-table .ellipsis-cell .cell-container { .adf-data-table .ellipsis-cell .cell-container {
height: 1em; } height: 1em; }
.adf-data-table .ellipsis-cell .cell-value { .adf-data-table .ellipsis-cell .cell-container > * {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em; }
.adf-data-table .ellipsis-cell .cell-value {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; } line-height: 1.12em; }
.adf-data-table .ellipsis-cell > div:after { .adf-data-table .ellipsis-cell > div:after {
content: attr(title); content: attr(title);
@@ -202,15 +202,24 @@
height: 1em; height: 1em;
} }
.cell-container > * {
display: block;
position: absolute;
max-width: calc(100% - 2em);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.12em;
}
/* visible content */ /* visible content */
.cell-value { .cell-value {
display: block; display: block;
position: absolute; position: absolute;
max-width: 100%; max-width: calc(100% - 2em);
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* for vertical align of text */
line-height: 1.12em; line-height: 1.12em;
} }