Html 被溢出裁剪的 Bootstrap 下拉列表：隐藏的容器，如何更改容器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31829312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown clipped by overflow:hidden container, how to change the container?
提问by AlBaraa Sh
Using bootstrap, I have a dropdown menu(s) inside a divwith overflow:hidden, which is needed to be like this. This caused the dropdowns to be clipped by the container.
使用自举，我有一个下拉菜单（小号内）div用overflow:hidden，这是需要这样。这导致下拉列表被容器剪裁。
My question, how can I solve this clipping issue, e.g. change the container of all dropdowns inside my project to be body, with lowest cost possible?
我的问题，我怎样才能解决这个剪辑问题，例如body，以尽可能低的成本将我项目中所有下拉列表的容器更改为？
this is an example of the code: http://jsfiddle.net/0y3rk8xz/
这是代码示例：http: //jsfiddle.net/0y3rk8xz/
采纳答案by Conrad Warhol
if anyone interested in a workaround for this, bootstrap dropdown has a show.bs.dropdownevent you may use to move the dropdown element outside the overflow:hiddencontainer.
如果有人对此解决方法感兴趣，bootstrap dropdown 有一个show.bs.dropdown事件，您可以用来将下拉元素移动到overflow:hidden容器外。
$('.dropdown').on('show.bs.dropdown', function() {
$('body').append($('.dropdown').css({
position: 'absolute',
left: $('.dropdown').offset().left,
top: $('.dropdown').offset().top
}).detach());
});
there is also a hidden.bs.dropdownevent if you prefer to move the element back to where it belongs once the dropdown is closed:
如果您希望在下拉列表关闭后将元素移回其所属的位置，还有一个hidden.bs.dropdown事件：
$('.dropdown').on('hidden.bs.dropdown', function() {
$('.bs-example').append($('.dropdown').css({
position: false,
left: false,
top: false
}).detach());
});
Here is a working example:
这是一个工作示例：
回答by Guru
Change the div property to overflow:visible;, or Set Position:absolute;on .dropdown class like
将 div 属性更改为overflow:visible;, 或 Set Position:absolute;on .dropdown 类，如
.bs-example .dropdown{position:absolute;}
See the Working Code: http://jsfiddle.net/guruWork/3x1f8ng5/
回答by Jacob Colvin
My solution was to use static positioning on the dropdown. I had the dropdown inside a bootstrap table with overflow hidden.
我的解决方案是在下拉列表中使用静态定位。我在一个引导表中设置了下拉菜单，并隐藏了溢出。
<div class="table" style="overflow: hidden;">
<div class="dropdown" style="position: static;">
<div class="dropdown-menu">...</div>
</div>
</div>
It didn't work with your fiddle, however. So I'm not sure if my solution had something to do with bootstrap tables. Regardless, perhaps it will give someone something new to try.
但是，它不适用于您的小提琴。所以我不确定我的解决方案是否与引导表有关。无论如何，也许它会给某人一些新的尝试。
回答by Helder Pereira
I had some kind of scroll problem with most of solutions in this and other questions I've seen on SO. What worked for me was making the dropdown position inherit:
我在这个问题和我在 SO 上看到的其他问题中的大多数解决方案都遇到了某种滚动问题。对我有用的是制作下拉位置inherit：
.dropdown {
position: inherit;
}
And then set the dropdown-menuposition using JavaScript:
然后dropdown-menu使用 JavaScript设置位置：
$(document).on("show.bs.dropdown", function () {
var dropdownToggle = $(this).find(".dropdown-toggle");
var dropdownMenu = $(this).find(".dropdown-menu");
dropdownMenu.css({
"top": (dropdownToggle.position().top + dropdownToggle.outerHeight()) + "px",
"left": dropdownToggle.position().left + "px"
});
});
Here is a working example: http://jsfiddle.net/ck66ee9q/
这是一个工作示例：http: //jsfiddle.net/ck66ee9q/
回答by Chait
I was facing the same issue and after searching for hours.. I created a event handler to catch the dropdown-toggle and get the positions and attach it dynamically. so that it doesnt get cut off.
我遇到了同样的问题，并且在搜索了几个小时之后......我创建了一个事件处理程序来捕捉下拉切换并获取位置并动态附加它。以免被切断。
Here is the simple code I used. Try it out if this helps.
这是我使用的简单代码。如果这有帮助，请尝试一下。
$('.dropdown-toggle').click(function (){
dropDownFixPosition($('button'),$('.dropdown-menu'));
});
function dropDownFixPosition(button,dropdown){
var dropDownTop = button.offset().top + button.outerHeight();
dropdown.css('top', dropDownTop + "px");
dropdown.css('left', button.offset().left + "px");
}
回答by PILABRE MIKAILA
You can also try this one by replacing yourDivIdby the id of your div.
您也可以通过将yourDivId替换为您的 div 的 id 来尝试这个。
$('.dropdown').on('show.bs.dropdown', function() {
$('#yourDivId').css('overflow-x', 'visible');
});
$('.dropdown').on('hidden.bs.dropdown', function() {
$('#yourDivId').css('overflow-x', 'hidden');
});
回答by Yulian
Ng Bootstrap >= 4.1.0 (Angular powered Bootstrap) solution:
Ng Bootstrap >= 4.1.0（Angular 驱动的 Bootstrap）解决方案：
For anyone struggling with the same issue, but using ng-bootstrap, here's a solution for you - use container="body"option in your ngbDropdown:
对于遇到相同问题但使用ng-bootstrap 的任何人，这里有一个适合您的解决方案 -container="body"在您的使用选项ngbDropdown：
<div ngbDropdown container="body">
<!-- Dropdown menu goes here -->
</div>
回答by Dov Miller
I had a divelement with a Bootstrap panelclass containing DevExpress ComboBoxescontained in divelements with Bootstrap col-lgclasses.
我有一个div带有 Bootstrappanel类的元素，其中包含ComboBoxes包含在div具有 Bootstrapcol-lg类的元素中的 DevExpress 。
I had a problem of the panelbackground color or border color bleeding to the divabove. To resolve that I added overflow:hidden;to the panelbut that caused the ComboBox's dropdown to be cut off. I added style="position: inherit"to those div elements within the panelcontaining the ComboBoxes and that solved the problem.
我有panel背景颜色或边框颜色溢出到div上面的问题。为了解决我添加overflow:hidden;到panel但导致 ComboBox 的下拉列表被切断的问题。我添加style="position: inherit"到panel包含 ComboBoxes 中的那些 div 元素并解决了问题。
<div class="col-sm-12" style="position: inherit">
<div class="col-sm-4" style="position: inherit">
<dx:aspxComboBox></dx:aspxComboBox>
</div>
</div>
This solution I found here.
回答by S. Mert
All suggestions that have been made here have some kind of lacking things and I could not make them work properly. So I have made this one based on all suggestions and works great for me.
这里提出的所有建议都有一些不足之处，我无法使它们正常工作。所以我根据所有建议制作了这个，并且对我很有用。
I have used another class here to make it different than regular dropdown elements that I might wanna have them run in the regular way.
我在这里使用了另一个类来使它与我可能希望它们以常规方式运行的常规下拉元素不同。
$(document).on("show.bs.dropdown", ".dropdown.my-body-dropdown", function () {
//original dropdown element
var thisDropdown = $(this);
//make a deep clone
var thisDropdownCopy = thisDropdown.clone(true, true);
//append to the body with a different class which is my-modified-dropdown here
//and open which will make dropdown menu show up
$("body").append( thisDropdownCopy.addClass("my-modified-dropdown open").css({ "position": "absolute", "left": thisDropdown.offset().left, "top": thisDropdown.offset().top }).detach() );
//hide the original dropdown element
$(this).hide();
})
.on("hidden.bs.dropdown", ".dropdown.my-body-dropdown", function() {
//remove modified dropdowns
$(".dropdown.my-body-dropdown.my-modified-dropdown").remove();
//show original dropdowns
$(".dropdown.my-body-dropdown").show();
});
回答by mikeapr4
I faced the same issue, with needing to have overflow:hiddenset, but yet have the drop-down not be clipped.
我遇到了同样的问题，需要overflow:hidden设置，但下拉菜单没有被剪裁。
However my situation involved the Bootstrap Carousel, so I decided a valid solution would make the overflow visible only when the dropdown is opened, and when it closes, the overflow can return to hidden. This solution might work for others, so I'm sharing it.
但是我的情况涉及Bootstrap Carousel，所以我决定一个有效的解决方案是只有在下拉菜单打开时才使溢出可见，当它关闭时，溢出可以返回隐藏状态。这个解决方案可能适用于其他人，所以我分享它。
$('.dropdown-toggle').click(function() {
var $container = $(this).parent('.carousel-inner');
$container.css('overflow','visible');
$(document).one('click', function() {
$container.css('overflow','');
});
});
Note, this doesn't check for Esckey being used to close the dropdown, but in my case this wasn't an issue. My own version uses a class to apply the style which some devs might prefer instead of modifying inline CSS.
请注意，这不会检查用于Esc关闭下拉列表的密钥，但在我的情况下，这不是问题。我自己的版本使用一个类来应用某些开发人员可能更喜欢的样式，而不是修改内联 CSS。
