Question

我正在尝试向ui-grid的每一行添加更多选项，因此我正在实现“ 3点”方法。但是，我遇到了这个问题，因为下拉菜单已应用position: absolute，所以下拉菜单会遍历整个屏幕。我不能使用position: relative，因为每一行，尤其是ui-grid都应用了overflow: hidden样式，我无法绕过。

我一直在使用dropdown-append-to-body="true"指令将其附加到主体上，但这是使它遍历屏幕的原因。

我期望的最终结果是我的下拉菜单保留在屏幕上。我可以编写一些样式以将其显示为窗口右侧的10px，但并不是我的所有ui网格都那么宽，所以奇怪的是，在我的一个ui网格下拉菜单中打开的位置很右边宽度为屏幕的50％。

我该怎么办才能解决这个问题？

var myApp = angular.module("myApp", ['ui.bootstrap', 'ui.grid']); 

myApp.controller("myController", function () {
    var vm = this;
    
    vm.gridOptions = {
      enableRowSelection: true,
      enableRowHeaderSelection: false,
      enableColumnMenus: false,
      data: [
        { col1: 'Blah', col2: 'Blah' }
      ]
    }
    
    vm.gridOptions.columnDefs = [
      { name: 'col1', displayName: 'Column 1' },
      { name: 'col2', displayName: 'Column 2' },
      { name: 'col3', displayName: 'Column 3' },
      { name: 'col4', displayName: 'Column 4' },
      { name: 'col5', displayName: 'Column 5' },
      { name: 'more', displayName: '', enableSorting: false, minWidth: 55, maxWidth: 70,
        cellTemplate:
          '<div class="ui-grid-cell-contents text-center">' +
            '<span uib-dropdown dropdown-append-to-body="true">' +
              '<i class="ion-ios-more" uib-dropdown-toggle title="More options"></i>' +
              '<ul class="dropdown-menu" uib-dropdown-menu role="menu">' +
                '<li><a>Option 1</a></li>' +
                '<li><a>Option 2</a></li>' +
                '<li><a>Option 3</a></li>' +
              '</ul>' +
            '</span>' +
          '</div>'
      }
    ];
});

body {
  overflow-x: hidden;
}

.ion-ios-more {
  font-size: 24px;
}

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
</head>

<body ng-app="myApp">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.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-grid/4.0.7/ui-grid.min.js"></script> 

  <div ng-controller="myController as vm">
    <div id="my-grid" ui-grid="vm.gridOptions"></div>
  </div>
</body>

Answer 1

进行以下更改将帮助您将菜单放置在正确的位置
1）在您的JSP中创建自定义类。

.custom{
  right: 0 !important;
  left: auto !important;
}

2）将更改添加到您的UL标签。

<ul class="dropdown-menu pull-right custom" uib-dropdown-menu role="menu" >

var myApp = angular.module("myApp", ['ui.bootstrap', 'ui.grid']); 

myApp.controller("myController", function () {
    var vm = this;
    
    vm.gridOptions = {
      enableRowSelection: true,
      enableRowHeaderSelection: false,
      enableColumnMenus: false,
      data: [
        { col1: 'Blah', col2: 'Blah' }
      ]
    }
    
    vm.gridOptions.columnDefs = [
      { name: 'col1', displayName: 'Column 1' },
      { name: 'col2', displayName: 'Column 2' },
      { name: 'col3', displayName: 'Column 3' },
      { name: 'col4', displayName: 'Column 4' },
      { name: 'col5', displayName: 'Column 5' },
      { name: 'more', displayName: '', enableSorting: false, minWidth: 55, maxWidth: 70,
        cellTemplate:
          '<div class="ui-grid-cell-contents text-center">' +
            '<span uib-dropdown dropdown-append-to-body="true">' +
              '<i class="ion-ios-more" uib-dropdown-toggle title="More options"></i>' +
              '<ul class="dropdown-menu pull-right custom" uib-dropdown-menu role="menu" >' +
                '<li><a>Option 1</a></li>' +
                '<li><a>Option 2</a></li>' +
                '<li><a>Option 3</a></li>' +
              '</ul>' +
            '</span>' +
          '</div>'
      }
    ];
});

body {
  overflow-x: hidden;
}
.custom{
  right: 0 !important;
  left: auto !important;
}
.ion-ios-more {
  font-size: 24px;
}

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.0.6/ui-grid.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css" rel="stylesheet"/>
</head>

<body ng-app="myApp">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.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-grid/4.0.7/ui-grid.min.js"></script> 

  <div ng-controller="myController as vm">
    <div id="my-grid" ui-grid="vm.gridOptions"></div>
  </div>
</body>

在溢出下隐藏的下拉菜单：隐藏的容器

1 个答案: