Аккумулятор бутстрапа Twitter и проблема с переполнением кнопки

Я использую Bootstrap для раздела моего сайта. Я смешиваю аккордеон с выпадающей кнопкой. Проблема возникает, когда кнопка находится внизу, раскрывающееся меню скрыто, так как переполнение .accordion-body установлено в скрытое.

Вы можете просмотреть jsfiddle здесь: http://jsfiddle.net/DBQU7/6/

Итак, я сделал то, что вы ожидали, попытался сделать overflow-y:visible. Но тогда вы можете увидеть результат здесь, он не работает: (Возможно, вы также можете заметить, что выпадающее меню находится внутри div, что создает полосу прокрутки внутри div вместо того, чтобы просто отображаться.

http://jsfiddle.net/DBQU7/5/

Я видел этот вопрос, похожий: Twistter Bootstrap (кнопка выпадающего списка) + Div Fixed

Но это не устраняет проблему, как я упоминал выше.

Итак, вопрос в том, как я могу просто создать раскрывающееся меню.

Спасибо.

Единственное решение, которое я нашел до сих пор (и я был бы рад доказать, что оно ошибочно) заключалось в том, чтобы добавить свойство CSS, которое сделало переполнение видимым, когда оно было открыто, а затем через JS script сделать его переключением между видимыми и скрытый... не идеальный, но пока ничего лучше.

- Отредактировано - Это на самом деле не очень хорошо работает и не кажется жизнеспособным решением.

Ответ 1

Оригинальная идея

Вы были очень близки к своему решению. Это он:

.accordion-body.in { overflow:visible; }

Класс .in добавляется при открытии и, следовательно, только устанавливает видимость при открытии.

См. пример скрипта.

Обновление, которое может помочь с ошибкой Chrome

Указанная ниже погрешность mg1075 может быть решена путем небольшого изменения кода выше, например:

.accordion-body.in:hover { overflow:visible; }

Это существенно предотвращает появление overflow до завершения анимации. Он работает хорошо, за исключением того, что когда вы нажимаете кнопку "вниз", чтобы открыть раскрывающееся меню, а затем выйдите из .accordion-body, он снова обрушится на раскрывающийся список, но только пока вы не наведете мышью область выпадающего меню. Некоторые могут считать поведение предпочтительным.

Смотрите скрипт с кодом обновления.

Ответ 2

Другое решение, которое работает в каждом браузере:

.accordion-body[class*="in collapse"]{ overflow:visible;}

Ответ 3

Я не знаю, найдёте ли вы это приемлемое альтернативное решение или сколько у вас выпадающего списка, но вы можете использовать " dropup", чтобы меню выпадающего меню уменьшалось вверх, а не вниз.

http://jsfiddle.net/ecSH4/

<div class="btn-group dropup">

UPDATE

Скорее kludgy в этот момент, но в ограниченном смысле, он "работает".

http://jsfiddle.net/ecSH4/52/

$(".special-drop, .special-drop .caret").click(function() {
    var $myCollapsable = $(this).closest(".collapse"),
        $myDropDown = $(this).closest(".dropdown"),
        $myDropDownMenu = $(this).next(".dropdown-menu");

    function toggleDropMenu() {
        if ($myDropDown.hasClass("open")) {
            $myDropDownMenu.hide();
        } else {
            $myDropDownMenu.show();
        }
    }

    if ($myCollapsable.css("overflow") === "hidden") {
        $myCollapsable.css("overflow", "visible");
        toggleDropMenu();
    } else {
        $myCollapsable.css("overflow", "hidden");
        $myDropDownMenu.hide();
        toggleDropMenu();
    }

});

$(document).click(function() {
   $(".collapse").css("overflow", "hidden");
   $(".dropdown-menu").hide();
});

Ответ 4

Установите overflow: visible, когда меню открыто (демонстрация):

$('html').on('click', function() {
    setTimeout(function() {
        $('[data-toggle="dropdown"]').closest('.collapse').css('overflow', '');
    }, 0);
});

$('body').on('click', '[data-toggle="dropdown"]', function() {
    var parent = $(this).parent(), collapse = parent.closest('.collapse');
    setTimeout(function() {
        collapse.css('overflow', parent.hasClass('open') ? 'visible' : '');
    }, 0);
});

Кажется, что проблема с перерисовкой в Chrome (протестирована в Chrome 19 на Linux), если мы установили переполнение напрямую. setTimeout() работает вокруг этой проблемы.

Ответ 5

добавьте идентификатор в ссылку переключения выпадающего списка.

Пример:

id="actionButton"

и с помощью jQuery

function actionButtonExpand() {
    var actionButtonDropdownMenuHeight=$(this).parent().children(".dropdown-menu").height()+19;
    var actionButtonAccordionBodyHeight = $(this).parent().parent().parent().height();
    var actionButtonAccordionBodyExtended = actionButtonDropdownMenuHeight+actionButtonAccordionBodyHeight;
        $(this).dropdown();
        if($(this).parent().hasClass("open")){        
            $(this).parent().parent().parent().css("height","");
            $(this).parent().css("margin-bottom","9px");
        } else {
            $(this).parent().parent().parent().height(actionButtonAccordionBodyExtended);
            $(this).parent().css("margin-bottom",actionButtonDropdownMenuHeight);
        }
    }

function actionButtonContract() {
    $("#actionButton").parent().parent().parent().css("height","");
    $("#actionButton").parent().css("margin-bottom","9px");

}                           
$("#actionButton").click(actionButtonExpand);
$(".accordion-toggle").click(actionButtonContract);

http://jsfiddle.net/baptme/6yAnc/

Ответ 6

Итак, здесь частичное решение. Это приводит к тому, что выпадающее меню идет вверх. Сделать это броском.

Здесь правило CSS для добавления:

.btn-group.open-upward.open ul.dropdown-menu {
    top: auto;
    bottom: 100%;
}

Итак, класс для добавления: open-upward

<div class="btn-group open-upward">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
      <li>Dropdown stuff</li>
  </ul>
</div>

Я говорю частично, потому что как только вы добавите класс, он будет двигаться вверх. Вам придется удалить класс, чтобы вернуть его обратно по умолчанию.

Ответ 7

Я знаю, что я на семь месяцев опоздал на эту вечеринку, но, возможно, кто-то еще найдет это полезным.

Самое чистое решение, которое я нашел для этой проблемы, - использовать обработчики событий Bootstrap на аккордеоне. Это все еще вроде kludgy, но IMO это менее хакерский, чем принятый ответ ScottS (который, я думаю, был бы лучше, если бы не поведение в Chrome).

$(document).ready(function() {
  $('.accordion-body').on('shown', function() {
    $(this).css('overflow', 'visible');
  });
  $('.accordion-body').on('hide', function() {
    $(this).css('overflow', 'hidden');
  });
});

Ответ 8

Это все, что вам нужно добавить, чтобы отобразить раскрывающееся меню:

#collapseThree {
 overflow: visible;   
}

http://jsfiddle.net/DBQU7/6/

Ответ 9

Это первый результат для этой проблемы в Google, поэтому я собираюсь передать это здесь от имени сообщества bootstrap. Согласно команде bootstrap, эта проблема должна быть исправлена в версии 3.0; ниже рекомендуемое промежуточное решение:

В boostrap.js измените функцию перехода:

, complete = function () {
        if (startEvent.type == 'show') that.reset()
        that.transitioning = 0
        that.$element[method]('fully').trigger(completeEvent)
      }

в boostrap.css, добавьте этот класс:

.collapse.in.fully
{
    overflow:visible;
}

Я тестировал это в IE8, 9 и 10, FF 11 и 12. Это все браузеры, разрешенные в нашей сети, но если он работает в IE8 и FF11, вероятность того, что он будет работать повсюду. У меня были проблемы с принятым решением в FF11.

источник: твиттер github issue # 3601

Ответ 10

Если вы нашли свой путь здесь, ища помощь при получении выпадающего списка кнопки Bootstrap для работы внутри jqgrid (из связанного вопроса), ответ оказывается мертвым простым. Во-первых, в записи colModel для столбца кнопки установите класс css, используя атрибут "classes", затем добавьте строку в ваш файл css, чтобы сделать стиль для этого переполнения класса: видимым. В качестве бонуса, если вы установили заголовок: false в записи colModel, вы избавитесь от наведения курсора на вашей кнопке.

Итак:

colModel:[...
    {name:"Action", index:"RecID", classes:"actionTD", title:false, label:"Action", width: 80, fixed: true, sortable:false, align: 'center', formatter: 'actionFormatter'}

.ui-jqgrid tr.jqgrow td.actionTD {overflow: visible;}