Question

我正在使用angularjs UI-Grid来显示数据，但工具提示打破了用户界面         场景：当任何列获得大文本时，列工具提示不会正确显示文本，甚至显示扭曲的ui         我创建了一个plunker，并检查第二列工具提示文本。

            网址：http://plnkr.co/edit/ZRiSriYJaaU0NLzr5RLR?p=preview
            请建议如何在Angular UI-Grid

中的工具提示中显示大文本

<!doctype html>
<html ng-app="app">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-animate.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="http://ui-grid.info/release/ui-grid.js"></script>
    <link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
    <link rel="stylesheet" href="main.css" type="text/css">
  </head>
  <body>

    <div ng-controller="MainCtrl">
      <br>
      <br>
      <div id="grid1" ui-grid="gridOptions" class="grid"></div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

Answer 1

您可以在\n文字中使用cellTooltip来打破长队。

像

'Name: ' + row.entity.name + '\nCompany: ' + row.entity.company +'\n';

具有大文本大小的角度ui-grid工具提示

1 个答案: