为什么向列标题添加工具提示会导致角列向侧面跳跃? [英] Why does adding tooltips to column heading cause angular columns to jump sideways?

问题描述

我有这个模板:

 
<h2 i18n="@@prioritizedWordsToLearn">要学习的优先单词</h2><table class="table table-striped"><头><tr><th i18n="@@wordColumn">Word</th><th i18n="@@definitionColumn">定义</th><th i18n="@@timesAddedColumn"placement="top" i18n-ngbTooltip="@@timesAddedTooltip" ngbTooltip="你添加这个单词学习的次数"tooltipClass="opacity-1" tooltip-append-to-body="true">添加次数</th><th i18n="@@previouslyMarkedLearnedColumn"placement="top" i18n-ngbTooltip="@@previouslyMarkedLearnedTooltip"ngbTooltip="True 如果你曾经说过你学过这个词" tooltipClass="opacity-1" tooltip-append-to-body="true">以前标记学到了<th i18n="@@rankColumn"placement="top" i18n-ngbTooltip="@@rankTooltip" ngbTooltip="与其他单词相比，学习这个单词的紧迫性"tooltipClass="opacity-1" tooltip-append-to-body="true">Rank<th i18n="@@learnedItColumn">我学会了</th></tr></thead><tr *ngFor="let word of model"><td>{{word.word}}</td><td>{{word.definition}}</td><td>{{word.timesAdded}}</td><td>{{word.wasMarkedLearned |翻译}}</td><td>{{word.rank()}}</td><td><input type="checkbox" [(ngModel)]="word.learned" (click)="learn(word)"></td></tr></tbody>

在添加工具提示之前，列保持在它们最初在页面上呈现的位置.

要学习的优先单词单词定义时间添加以前标记的已学习排名我已经学习了

但是现在，当用户将鼠标悬停在其中一个标题上时，该列会向右或向左移动.在某些区域，列继续移动 - 高速闪烁.

这是 Angular 中的错误，还是 s 或 css 中的某个地方需要一些额外的元数据?

移除 tooltip-append-to-body 没有效果.

解决方案

这里的问题是工具提示被插入到标题行导致浏览器回流，即重新计算布局，考虑到工具提示的宽度导致表格行跳出位置.

非常接近这里的解决方案，tooltip-append-to-body 不是有效的角度指令.用于相同目的的 ng-bootstrap 库的 angular 指令是 container="body".

关于 api 的更多信息:https://ng-bootstrap.github.io/#/components/tooltip/api

I have this template:

  <div class="container">
  <h2 i18n="@@prioritizedWordsToLearn">Prioritized Words To Learn</h2>
  <table class="table table-striped">
    <thead>
      <tr>
        <th i18n="@@wordColumn">Word</th>
        <th i18n="@@definitionColumn">Definition</th>
        <th i18n="@@timesAddedColumn" placement="top" i18n-ngbTooltip="@@timesAddedTooltip" ngbTooltip="Number of times you have added this word to learn"
          tooltipClass="opacity-1" tooltip-append-to-body="true">Times Added</th>
        <th i18n="@@previouslyMarkedLearnedColumn" placement="top" i18n-ngbTooltip="@@previouslyMarkedLearnedTooltip"
          ngbTooltip="True if you ever said you had learned this word" tooltipClass="opacity-1" tooltip-append-to-body="true">Previously
          Marked
          Learned</th>
        <th i18n="@@rankColumn" placement="top" i18n-ngbTooltip="@@rankTooltip" ngbTooltip="Urgency of learning this word compared to your other words"
          tooltipClass="opacity-1" tooltip-append-to-body="true">Rank</th>
        <th i18n="@@learnedItColumn">I've Learned It</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let word of model">
        <td>{{word.word}}</td>
        <td>{{word.definition}}</td>
        <td>{{word.timesAdded}}</td>
        <td>{{word.wasMarkedLearned | translator}}</td>
        <td>{{word.rank()}}</td>
        <td><input type="checkbox" [(ngModel)]="word.learned" (click)="learn(word)"></td>
      </tr>
    </tbody>
  </table>
</div>

Before adding the tooltips, the columns stayed exactly where they were initially rendered on the page.

Prioritized Words To Learn
Word    Definition  Times Added Previously Marked Learned   Rank    I've Learned It

But now, when a user hovers over one of the headings, the column shifts right or left. And in some areas, the columns continue shifting--a high-speed flicker.

Is this a bug in Angular, or is there some additional metadata required in the s, or in css somewhere?

Removing tooltip-append-to-body has no effect.

解决方案

The problem here is that the tooltips get inserted into the header row causing the browser to reflow, i.e. recalculate the layout, taking into account the width of the tooltips causing the tables rows to jump out of place.

Quite close with the solution here, tooltip-append-to-body is not a valid angular directive. The angular directive of the ng-bootstrap library serving the same purpose is container="body".

More info on the api: https://ng-bootstrap.github.io/#/components/tooltip/api

这篇关于为什么向列标题添加工具提示会导致角列向侧面跳跃?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！