Перенос слов в столбце - PullRequest
Новая
       19

Перенос слов в столбце

0 голосов
/ 18 апреля 2019

Я использую ngx-datatable для отображения моих данных, и я не хочу показывать горизонтальную полосу прокрутки, поэтому мне нужно обернуть слово именем столбца, чтобы я мог уменьшить ширину столбцов и в конечном итоге удалить горизонтальную полосу прокрутки

Я пытался добавить этот CSS, чтобы он был упакован, но, похоже, он не работает 

.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;
}

Я тоже пытался использовать перенос слов, но это тоже не работает.

Это мой HTML 

<ngx-datatable style="height: 410px" class="material" [rows]="assignedTinYearsList" [columns]="assignedTinYearsListColumns" [sortType]="'multi'"
                        [columnMode]="'standard'" [headerHeight]="50" [footerHeight]="50" [rowHeight]="50" [limit]="10" [scrollbarV]="true" [scrollbarH]="true">
                        </ngx-datatable>

и это список имен столбцов 

this.assignedTinYearsListColumns = [
            { 'name': 'TIN Year Name', 'prop': 'tinYearName', 'cellTemplate': this.tinYearLinkColumnTpl },
            { 'name': 'TIN', 'prop': 'tin', 'cellTemplate': this.tinLinkColumnTpl },
            { 'name': 'CMS Quality Rep. Type', 'prop': 'reportingType' },
            { 'name': 'CMS IA Rep. Type',  'word-wrap': 'break-word', 'prop': 'iaReportingType' },
            { 'name': 'MFFS Billing', 'prop': 'mffsBilling', 'width': '100', 'cellTemplate':this.provdetailmffsyesNoColumnTemplate},
            { 'name': 'Quality Goal Exclusion', 'word-wrap': 'break-word', 'prop': 'qualityGoalsExclusion','width': '170', 'cellTemplate': this.qualityCheckBoxColumnTpl },
            { 'name': 'Quality Exclusion Reason', 'overflow-wrap': 'break-word', 'prop': 'qualityExclusionReason', 'width': '192', 'cellTemplate': this.QualityDropShowReason },
            { 'name': 'IA Goal Exclusion', 'prop': 'goalExclusion','width': '130', 'cellTemplate': this.checkBoxColumnTpl },
            { 'name': 'IA Exclusion Reason', 'prop': 'exclusionReason', 'width': '192', 'cellTemplate': this.DropShowReason },
        ];

Мне нужно указать размер имени столбца, например «Исключение из цели качества». Запрос предложений.

1 Ответ

0 голосов
/ 18 апреля 2019

В моем случае я использую [columnMode] = "'force'" для использования 'flexbox' и для каждой строки: 

<ngx-datatable-column name="event" prop="event" [flexGrow]="1">
    <ng-template let-column="column" ngx-datatable-header-template>
        <div> foo </div>
    </ng-template>
    <ng-template let-value="value" ngx-datatable-cell-template>
        <div> {{value}} </div>
    </ng-template>
</ngx-datatable-column>

Он генерирует больше кода, но его легче редактировать.

...