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

我正在尝试向ui网格的每一行添加更多选项，因此我正在实现“3点”方法。但是我遇到了这个问题，我的下拉菜单在屏幕上显示，因为它应用了

position:absolute

。我不能使用

position:relative

，因为每一行，尤其是ui网格都应用了

溢出：隐藏的
样式，我无法绕过它

我一直在使用
下拉菜单append to body=“true”
指令将其附加到body，但这正是它出现在屏幕上的原因

我预期的最终结果是我的下拉菜单停留在屏幕上。我可以写一些样式，在窗口的右边显示10px，但并不是我所有的ui网格都那么宽，所以在我的ui网格上，下拉菜单在右边打开，而它的宽度是屏幕的50%，这会很奇怪

我能做些什么来解决这个问题


var myApp=angular.module（“myApp”、“ui.bootstrap”、“ui.grid”）；
myApp.controller（“myController”，函数（）{
var vm=这个；
vm.gridOptions={
enableRowSelection:true，
enableRowHeaderSelection:false，
EnableColumn菜单：false，
数据：[
{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，
单元模板：
'' +
'' +
'' +
“
”+
“
选项1
”+
“
选项2
”+
“
选项3
”+
“
”+
'' +
''
}
];
});
正文{
溢出x：隐藏；
}
.更多{
字体大小：24px；
}
以下更改将帮助您将菜单放在正确的位置

1） 在JSP中创建自定义类

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

2） 添加对UL标签的更改

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

我已经提到，一些网格不会占据100%的宽度。这意味着，其中一些下拉菜单将不合适，因为网格会在中间停止，下拉菜单会出现在滚动条旁边。