Используя bootstrap, у меня есть раскрывающееся меню (s) внутри div с overflow:hidden, которое необходимо для этого. Это привело к тому, что выпадающие окна были обрезаны контейнером.
Мой вопрос, как я могу решить эту проблему отсечения, например. изменить контейнер всех выпадающих списков внутри моего проекта на body, с минимальными затратами?
это пример кода: http://jsfiddle.net/0y3rk8xz/
если кто-то заинтересован в том, чтобы обойти это, выпадающий список начальной загрузки имеет событие 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());
});
также есть событие hidden.bs.dropdown, если вы предпочитаете переместить элемент обратно туда, где он находится после закрытия раскрывающегося списка:
$('.dropdown').on('hidden.bs.dropdown', function() {
$('.bs-example').append($('.dropdown').css({
position: false,
left: false,
top: false
}).detach());
});
Вот рабочий пример:
Измените свойство div на overflow:visible; или установите Position:absolute; на класс .dropdown, например
.bs-example .dropdown{position:absolute;}
См. Рабочий код: http://jsfiddle.net/guruWork/3x1f8ng5/
Я столкнулся с той же проблемой и после поиска часов. Я создал обработчик событий, чтобы поймать выпадающий список и получить позиции и прикрепить его динамически. так что он не обрезается.
Вот простой код, который я использовал. Попробуйте, если это поможет.
$('.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");
}
У меня была какая-то проблема с прокруткой с большинством решений в этом и других вопросах, которые я видел на SO. Что сработало для меня, это сделать выпадающее положение inherit:
.dropdown {
position: inherit;
}
И затем установите позицию 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"
});
});
Вот рабочий пример: http://jsfiddle.net/ck66ee9q/
Мое решение состояло в том, чтобы использовать статическое позиционирование в раскрывающемся списке. У меня было выпадающее меню внутри загрузочной таблицы с скрытым переполнением.
<div class="table" style="overflow: hidden;">
<div class="dropdown" style="position: static;">
<div class="dropdown-menu">...</div>
</div>
</div>
Я столкнулся с той же проблемой, когда мне нужно установить overflow:hidden, но при этом выпадающее меню не будет обрезано.
Однако моя ситуация связана с Bootstrap Carousel, поэтому я решил, что действительное решение сделает переполнение видимым только тогда, когда раскрывающийся список открыт, и когда он закрывается, переполнение может вернуться к скрытому. Это решение может работать для других, поэтому я делюсь им.
$('.dropdown-toggle').click(function() {
var $container = $(this).parent('.carousel-inner');
$container.css('overflow','visible');
$(document).one('click', function() {
$container.css('overflow','');
});
});
Обратите внимание: это не проверяет ключ Esc, который используется для закрытия раскрывающегося списка, но в моем случае это не было проблемой. Моя собственная версия использует класс для применения стиля, который некоторые разработчики могут предпочесть вместо изменения встроенного CSS.
У меня был элемент div с классом panel Bootstrap, содержащим DevExpress ComboBoxes содержащиеся в элементах div с классами Bootstrap col-lg.
У меня была проблема с цветом фона panel или окраской границы цвета в div выше. Чтобы решить эту проблему, я добавил overflow:hidden; к panel но это вызвало отключение выпадающего списка ComboBox. Я добавил style="position: inherit" к тем элементам div на panel содержат ComboBox, и это решило проблему.
<div class="col-sm-12" style="position: inherit">
<div class="col-sm-4" style="position: inherit">
<dx:aspxComboBox></dx:aspxComboBox>
</div>
</div>
Это решение я нашел здесь.
У всех предложений, которые были сделаны здесь, есть какие-то недостатки, и я не мог заставить их работать должным образом. Так что я сделал это на основе всех предложений и прекрасно работает для меня.
Я использовал другой класс, чтобы отличать его от обычных выпадающих элементов, и я бы хотел, чтобы они работали обычным образом.
$(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();
});
Вы также можете попробовать это, заменив yourDivId идентификатором вашего div.
$('.dropdown').on('show.bs.dropdown', function() {
$('#yourDivId').css('overflow-x', 'visible');
});
$('.dropdown').on('hidden.bs.dropdown', function() {
$('#yourDivId').css('overflow-x', 'hidden');
});
Изменение контейнера возможно с помощью jQuery, например. $(".dropdown").insertAfter(".bs-example");
Смотрите этот код, например: https://jsfiddle.net/SolveItSimply/pwmyvsw6/
Я не рекомендую это, поскольку, поскольку вы потеряете какую-либо полезность позиционирования Bootstrap и сохраните выпадающие элементы в порядке, будет беспорядочно.
Вместо этого вы можете использовать overflow:visible вместе со "скрытым" классом в своих интересах, скрывая любой элемент, который переполняется JavaScript. Вот пример: http://jsfiddle.net/SolveItSimply/z14c210x/
Вам нужно будет проверить содержащиеся элементы, когда div будет сначала видимым и всякий раз, когда высота контейнера изменится, что я пытался продемонстрировать в моем примере.
Я не мог установить контейнер overflow:visible, но вставка
<div class="clearfix" />
ниже блока, содержащего Dropdown, решена проблема для меня.
Просто измените значение переполнения на visible.