为什么相邻行的文本折叠？

Question

我需要在不使用省略号的情况下显示每列的所有数据。实际上我的数据与相邻行折叠在一起。如何显示一行中的所有数据？实际上列文本会很大（不知道它来自服务器的文本的长度）但我需要显示整个文本。请你告诉我如何显示所有列文本 这是我的代码

<div id="scrollingTable" ng-if="isservicedataloadedProperly">
            <ion-scroll overflow-scroll="true"  ng-style="viewHeight">
               <div class="row brd rowclass" collection-repeat="column in tasklist_records track by $index" ng-class="{white:$index%2 == 0,grey:$index%2 == 1,firstrow:$first}" collection-item-height="40">

                  <div class="col brbrdleft_right dleft_right col-10 text-center"></div>
               </div>
               <div ng-if="!haveNorecordFound" class="norecordfoundcss"> No record found.</div>
            </ion-scroll>
         </div>

更新：

已经使用高度的css

/* Styles go here */

.rowclass {

  height:50%;
}

没有任何作用..

Answer 1

根据之前的问题/答案，我从您的同事那里得到了一个印象，即移动设备不是您的主要目标。我得出这个结论是因为我反复指出 Ionic 已针对交付到移动设备的应用程序进行了优化，因此 UI 元素是为触摸而设计的，因此不建议更改标题、按钮和其他触摸目标的大小。我进一步指出，表格数据的大网格不利于在移动设备上显示，并且可用性非常差。

尽管有这些要点，但我从未解释过您为何继续采用您的设计方法，因此，我只能假设移动设备不是您的目标。如果这是正确的（您不是在设计移动或响应式应用程序），那么这里有一些选项：

1. 使用桌子。我之前曾向 Pallavi 推荐过这个。鉴于您的数据本质上是表格的，因此表格很有意义。此外，还有像UI Grid 这样的解决方案可以为处理复杂的数据集提供一些开箱即用的支持，并为列排序和搜索、分页、分组和汇总行提供许多内置功能。使用起来很麻烦，但根据您的要求，值得了解（再次假设您不是为移动设备构建）。

2. 不要使用 collection-repeat 而是选择 ng-repeat。 collection-repeat 指令旨在将大型数据集传送到移动设备。目的是在具有较小屏幕分辨率的低功耗设备上提供更好的性能。因此，collection-repeat 仅呈现当前视图中的集合项。为了有效地做到这一点，指令需要具有一致的行高，以便它可以计算可见项目的数量。我尝试并测试了几种方法来解决这个问题，但最后简单的答案是最高效的：改用 ng-repeat。您可以通过使用one-time bindings 和过滤器来极大地提高 ng-repeat 的性能，这些过滤器可以弥补 collection-repeat 提供的性能提升。

特别是如果我对移动部分有误，那么您应该考虑第三种选择是完全更改您的 UI 矢量。这不关我的事，但我确实有 25 年设计和构建企业软件产品的经验，所以如果我没有指出你当前的 UI 设计只不过是 MS 的非功能版本，那我就失职了Excel。对用户的好处在哪里？在分页网格中查看大约 5000 条记录如何帮助他们在工作环境中对这些数据采取行动？就个人而言，我会重新审视我的角色（或实际的用户利益相关者），并提出这两个问题。您可能会发现最好的方法是废弃所有内容并将其替换为其他一些 UI（例如搜索界面或列表界面）。事实上，我确实模拟了两种替代方法，但在测试之后，我认为这种努力和额外的绑定在桌面应用程序的上下文中没有意义。因此，再次，在我理解您的要求的背景下，我推荐上述两个选项。