[英]columnDefs header does not show from time to time
I have a very random problem on UI. 我在UI上有一个非常随机的问题。 It looks like the column definitions do not show from time to time. 看起来列定义不时显示。 it works fine 9 out of 10 times. 它在10次中有9次正常工作。
Two gif animations have been included to show what I actually mean as that will help to understand the issue much faster. 已经包含两个gif动画来显示我的实际意思,因为这将有助于更快地理解问题。
The screen below displays the column definition and everything is visible. 下面的屏幕显示列定义,一切都可见。
However, the second picture shows that the header column definitions are not visible 但是,第二张图显示标题列定义不可见
That problem is a completely random problem and I can't see why something like that is happening. 这个问题是一个完全随机的问题,我不明白为什么会发生类似的事情。
There is a link on official github repository for ui-grid issue which describes similar situation I have: ui-grid similar issue I tried to apply a few things but it does not work eg wrapping html page with 在ui-grid问题的官方github存储库上有一个链接描述了我的类似情况: ui-grid类似的问题我试图应用一些东西,但它不起作用,例如包装html网页
<script type="text/ng-template">
tag when I use ng-include but it didn't help 我使用ng-include时标记,但它没有帮助
Please advice if you had similar problem or you know how to fix it. 如果您遇到类似问题或者您知道如何解决问题,请提供建议。
Code snippets: 代码片段:
<div class="modal-body" style="width: 100%; height: 100%;" ng-modal-drag>
<div class="checkbox pull-right" style="margin-bottom: -40px; position: relative">
<label class="text-primary">
<input type="checkbox" ng-click="vm.updateHighlight()" ng-model="vm.companyMatch.isHighlighted" style="margin-top: 2px; outline: none;">Reviewed
</label>
</div>
<div class="clearfix"></div>
<uib-tabset>
<uib-tab ng-repeat="tab in vm.tabs" active="tab.active" heading="{{tab.heading}}" select="tab.select()" ng-if="tab.heading != 'Map' || vm.companyCandidates.length > 0">
<div ng-include="tab.content"></div>
</uib-tab>
</uib-tabset>
</div>
The interesting part is that loads html content and on the first tab the ui-grid always works and the problem exists only on the third tab when there is another ui-grid element 有趣的是,加载html内容并在第一个选项卡上ui-grid始终有效,并且当存在另一个ui-grid元素时,问题仅存在于第三个选项卡上
The related javascript code looks like below: 相关的javascript代码如下所示:
vm.gridOptions = {
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
enableColumnResizing: true,
enableRowSelection: true,
enableRowHeaderSelection: false,
multiSelect: false,
columnDefs: [{
field: 'businessName',
displayName: 'Business name'
}, {
field: 'fullAddress',
displayName: 'Address'
}, ...],
onRegisterApi: function(gridApi) {
vm.gridApi = gridApi;
}
};
After spending a reasonable amount of time on that issue I finally found the solution to that problem. 在这个问题上花了一段合理的时间后,我终于找到了解决这个问题的方法。
Here is the documentation for ui-grid when they encourage to use special javascript function to render grid properly after opening it in modal window. 这是ui-grid的文档,当他们鼓励使用特殊的javascript函数在模态窗口中打开它后正确渲染网格。
I have added code snippet below: 我在下面添加了代码段:
$interval( function() {
$scope.gridApi.core.handleWindowResize();
}, 500, 10);
and that thing works for me! 那件事对我有用!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.