ngx-datatable列标题工具提示被切断 [英] ngx-datatable column header tooltip gets cut off
本文介绍了ngx-datatable列标题工具提示被切断的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
<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,但是该指针在工作时会被数据表切断.如何防止它被切断?
This is part of my code. I needed to use a ngbTooltip, which works, for the column header, but when I hover the bubble gets cut off by the datatable. How can I prevent it from getting cutoff?
推荐答案
<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的边界.
By adding container="body" to the div with the tooltip it allowed the tooltip window to pop over the borders of the ngx-datatable.
旁注:在我的研究中,我发现您可以为ngbTooltip添加tooltipClass ="className"来自定义工具提示窗口.
Side note: in my research I found that for ngbTooltip you can add tooltipClass="className" to customize the tooltip window.
这篇关于ngx-datatable列标题工具提示被切断的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文