我正在尝试向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/[email protected]/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）在您的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/[email protected]/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>