Обнаружена ошибка автоматической ширины столбца U3 Grid v3.1.0

Question

Я нашел много вопросов о проблеме автошины сетки UI. Мне удалось воспроизвести один из них и хотел бы поделиться с вами подробностями о том, как воспроизвести его.

Во-первых, у меня есть сетка UI по умолчанию внутри скрытого модального кода (вы можете найти фрагмент кода в конце этого сообщения).

Шаги для воспроизведения:

1. Выполните фрагмент кода, нажмите кнопку "Запуск демо-модальный"; (проблем нет);

2. Закрыть мода;

3. Изменение размера окна браузера. вот. Ширина столбца сбрасывается в неправильное значение.

   var app = angular.module('app', ['ui.grid']); 
    
       
    
   app.controller('MainCtrl', ['$scope', '$http', 'uiGridConstants', function ($scope, $http, uiGridConstants) { 
    
       $scope.gridOptions1 = { 
    
       enableSorting: true, 
    
       columnDefs: [ 
    
        { field: 'name' }, 
    
        { field: 'gender' }, 
    
        { field: 'company', enableSorting: false } 
    
       ], 
    
       onRegisterApi: function(gridApi) { 
    
        $scope.grid1Api = gridApi; 
    
       } 
    
       }; 
    
       
    
       
    
       
    
   $scope.gridOptions1.data = [ 
    
       { name: 1, gender: 2, company: 3 }, 
    
       { name: 1, gender: 2, company: 3 }, 
    
       { name: 1, gender: 2, company: 3 }, 
    
       { name: 1, gender: 2, company: 3 }, 
    
       { name: 1, gender: 2, company: 3 }]; 
    
   }]);

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    
   
    
   <link href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" rel="stylesheet"/> 
    
   <link href="https://rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.css" rel="stylesheet"/> 
    
   
    
   <script src="https://rawgit.com/HubSpot/tether/master/dist/js/tether.js"></script> 
    
   <script src="https://rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script> 
    
   
    
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
    
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script> 
    
   
    
   <script src="https://rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.js"></script> 
    
   
    
   
    
   
    
   
    
   <!-- Button trigger modal --> 
    
   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    
       Launch demo modal 
    
   </button> 
    
   
    
   <!-- Modal --> 
    
   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    
       <div class="modal-dialog" role="document"> 
    
       <div class="modal-content"> 
    
        <div class="modal-header"> 
    
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
    
         <span aria-hidden="true">&times;</span> 
    
        </button> 
    
        <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
    
        </div> 
    
        <div class="modal-body" ng-app="app"> 
    
        <div ng-controller="MainCtrl"> 
    
        <div id="grid1" ui-grid="gridOptions1" class="grid"></div></div> 
    
        </div> 
    
        <div class="modal-footer"> 
    
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
    
        <button type="button" class="btn btn-primary">Save changes</button> 
    
        </div> 
    
       </div> 
    
       </div> 
    
   </div>

Answer 1

Кроме того, я хотел бы поделиться с вами подход фиксируя его.

На самом деле, здесь есть две ошибки.

1. Пользовательский интерфейс настроен на 0 на странице при изменении модальности;
2. Пользовательский интерфейс настроен на 0 на загрузке страницы.

Первый легко обнаружить и исправить, если вы используете несжатый версию пользовательского интерфейса Грид:

Там причина обоих вопросов является то же самое. Ширина скрытого элемента равна нулю.

Простое решение с JQuery будет выглядеть следующим образом для первого случая:

// Resize the grid on window resize events 
function gridResize($event) { 
    grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); 
    grid.gridHeight = $scope.gridHeight = gridUtil.elementHeight($elm); 
    console.log(grid.gridWidth); 
    console.log(grid.gridHeight); 
    if(!$($elm).is(':hidden') && grid.gridWidth > 0) { //add such if statement before     
     grid.refreshCanvas(true); //this is UI Grid code 
    } 
} 

Второй случай не так просто исправить. Поскольку нам нужно получить ширину контейнера Grid (в этом случае модальный контейнер).

Контейнер может быть внутри скрытого элемента (это означает, что jQuery(gridContainer).width() вернет ноль).

Вот как я наткнулся на jQuery.actual плагин (github или demo). Я буду использовать его, чтобы показать вам решение для этого конкретного случая:

// Initialize the directive 
function init() { 
    if($($elm).is(':hidden')) { //added 
     grid.gridWidth = $scope.gridWidth = $($elm).parent().actual('width'); //added 
    } //added 
    else { //added 
     grid.gridWidth = $scope.gridWidth = gridUtil.elementWidth($elm); //this is UI Grid code 
    } //added 
} 

В результате мы получим UI сетки с правильной автоматической функцией ширины. Наконец, нам не нужен $Interval обходной путь от tutorial с таким подходом.