Issue
I have a ngx-datatable with Angular 2 that has some very long column names. I would like to duplicate what they do with Auto Height for row (link to documentation) but would settle for just getting the really long names to wrap into multiple lines.
Normally this wouldn't be an issue but with my newness to Angular, I'm stuck. Normal things like overflow-wrap or word-wrap don't seem to work.
My current code:
<div class="full-width">
<ngx-datatable
class='material'
[rows]='rows'
[columns]="columns"
[columnMode]="'standard'"
[headerHeight]="150"
[footerHeight]="50"
[scrollbarH]="true"
[rowHeight]="'auto'"
>
</ngx-datatable>
</div>
Solution
Adding this to the CSS did the trick. It also centered and vertically aligned the column headers.
.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell {
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
text-align: center !important;
vertical-align: middle !important;
}
Answered By - 213374you
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.