Подсказка заголовка столбца ngx-datatable обрезается - PullRequest
Новая
       8

Подсказка заголовка столбца ngx-datatable обрезается

0 голосов
/ 30 ноября 2018 
<ngx-datatable-column [width]="24"
                                  [sortable]="true"
                                  [canAutoResize]="false"
                                  [draggable]="false"
                                  [resizeable]="false"
                                  [headerCheckboxable]="true"
                                  [checkboxable]="true">
            </ngx-datatable-column>
            <ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
                <ng-template let-column="column" ngx-datatable-header-template>
                    <ng-container>
                        <div ngbTooltip="Click on the word 'Name' to change the sort direction of the student list">
                            {{column.name}}
                        </div>
                    </ng-container>
                </ng-template>
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    <div>
                        <a href="#" (click)="!!onNameClicked(row)">{{value}}</a>
                    </div>
                </ng-template>
                </ngx-datatable-column>

Это часть моего кода.Мне нужно было использовать ngbTooltip, который работает, для заголовка столбца, но при наведении курсора пузырь обрезается по данным.Как я могу предотвратить его обрезание?

1 Ответ

0 голосов
/ 30 ноября 2018 
<ngx-datatable-column name='Name' prop='formattedStudentName' [width]="400" [cellClass]="'se-list-item'">
            <ng-template let-column="column" ngx-datatable-header-template>
                <ng-container>
                    <div container="body" ngbTooltip="Click on the word 'Name' to change the sort 
direction of the student list">
                        {{column.name}}
                    </div>
                </ng-container>
            </ng-template>
            <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                <div>
                    <a href="#" (click)="!!onNameClicked(row)">{{value}}</a>
                </div>
            </ng-template>
            </ngx-datatable-column>

Добавив container = "body" к div с помощью всплывающей подсказки, это позволило окну всплывающей подсказки переместиться за границы ngx-datatable.

Примечание: в своем исследовании я обнаружил, чтодля ngbTooltip вы можете добавить tooltipClass = "className", чтобы настроить окно всплывающей подсказки.

...