Question

存在以下DOM结构：modalDiv (modal window) -> ui-grid -> ui-select。在模式窗口中，该列中有一个ui-select的网格。

问题1：ui-grid对于overflow有自己的raw。在这方面，内部元素由表格行的高度修剪。如果我展开select，则options将被截断到raw的高度。为了解决此问题，我在ui-select中添加了append-to-body指令，该指令修复了body中的元素。但是在这方面，将会出现以下问题。

问题2：由于grid位于模块化窗口中，并且select固定在body中，因此随着模式窗口的滚动，select将与模态（好像是固定的）。

如何解决此问题？我尝试插入本机<select>而不是ui-select，然后通过一种有趣的技术解决了该问题：滚动被阻止直到其处于展开状态。但是本机选择不适合，因为对其进行样式化并不方便。也许您可以以某种方式不同地解决问题？如果没有，那么如何在打开选择时阻止滚动（不要删除overflow: hidden，因为模式会“抖动”）并在关闭选择时重新启用滚动？

在编辑器中重现了该问题。尝试不使用模式打开select，然后滚动窗口。万事皆安。现在，打开模式窗口并再次重复该过程。

angular.module('myApp', ['ui.grid', 'ui.select', 'ui.bootstrap']);

angular
  .module('myApp')
  .controller('mainCtrl', ['$uibModal', function ($uibModal) {
    const vm = this;
    
    var myTemplate = '<ui-select-wrap>\n' +
          '    <ui-select class="my-dropdown" ng-model="MODEL_COL_FIELD"\n' +
          '               append-to-body="true">\n' +
          '        <ui-select-match>{{ COL_FIELD }}</ui-select-match>\n' +
          '        <ui-select-choices repeat="item in col.colDef.editDropdownOptionsArray | filter: $select.search">\n' +
          '            <span>{{ item }}</span>\n' +
          '        </ui-select-choices>\n' +
          '    </ui-select>\n' +
          '</ui-select-wrap>';
  
  vm.open = function () {
    $uibModal.open({
      template: '<h3>Now try to open Select and make a scroll :(</h3>' +
      '<div ui-grid="$ctrl.gridOptions"></div>',
      controller: 'mainCtrl',
      controllerAs: '$ctrl',
      resolve: {
        gridOptions: function () {
          return vm.gridOptions;
        }
      }
    });
  }
  
  vm.gridOptions = {
      columnDefs: [
        { name: 'status', width: '50%' },
        { 
          name: 'name',
          cellTemplate: myTemplate,
          editDropdownOptionsArray: ['John', 'Bob', 'Alice']
        }
      ],
      data: [
        { status: 'New' },
        { status: 'New' }
      ],
      rowHeight: 40
    };
  }]);

.my-dropdown {
  z-index: 1100 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.3/ui-grid.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.3/ui-grid.core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.6.3/ui-grid.edit.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">

<body ng-app="myApp">
  <div ng-controller="mainCtrl as main">
    <button ng-click="main.open()">OPEN MODAL</button>
    <h3>Here, UI-Select works as it should. Open the select and try to scroll the window: the select is in place. Now open the modal window.</h3>
    <div ui-grid="main.gridOptions"></div>
  </div>
</body>

在网格列中选择

0 个答案: