bootstrap typeahead 下拉菜单不会在 bootstrap 折叠时展开答案

【问题标题】：bootstrap typehead dropdown doesn't expand over bootstrap collapsebootstrap typeahead 下拉菜单不会在 bootstrap 折叠时展开
【发布时间】：2013-07-20 07:29:07
【问题描述】：

所以我有 bootstrap collapse，里面有标签，在其中一个标签里面我有一个带有 text_field 的表单，它有 bootstrap typeahead，问题是 typeahead 的下拉菜单不会在折叠时展开。

具有自动完成功能的 text_field 是其中的最后一个元素。

这里是picture。

我希望下拉菜单在折叠元素下方展开（图片上的线条下方）

编辑：这是该视图的haml





- @i = 0
- @trainings.each do |training|
  - @i = @i+1
  .accordion#accordion2
    .accordion-group
      .accordion-heading
        %a{:class => 'accordion-toggle', 'data-toggle' => 'collapse', :href => "#collapse#{@i}"}
          = "Training #{@i}"
        %div{:id => "collapse#{@i}", :class => 'accordion-body collapse'}
          .accordion-inner
            %pre= "Description: #{training.description}"
            %ul.nav.nav-tabs#myTab
              %li.active
                %a{"data-toggle" => "tab", :href => "#planirano#{@i}"} Planirano
              %li
                %a{"data-toggle" => "tab", :href => "#napravljeno#{@i}"} Napravljeno
            .tab-content
              %div{:class => 'tab-pane active', :id => "planirano#{@i}"}
                - training.exercises.each do |exercise|
                  %pre= "#{exercise.element.name} | #{exercise.description} | #{exercise.number_of_series}"
                = form_for :training_exercise, :url => training_exercises_path(:training => training.id), remote: true, html: {:class => 'form-inline'} do |f|
                  = f.label :exercise
                  = f.text_field :exercise, :id => 'add_training_exercise'
                  = f.button :Add, :class => 'btn'
              %div{:class => 'tab-pane', :id => "napravljeno#{@i}"} to sam napravio

f.text_ifeld :exercise, :id => 'add_training_exercise' 是我要询问的带有自动完成功能的字段。

编辑：

and here is the rendered HTML

【问题讨论】：

这看起来像 z-index 问题。请发布您的 HTML 和 CSS 的一些代码
我添加了haml代码，仅此而已，这部分没有自定义css。我尝试使用 .typeahead { z-index: 99999999 !important;} 和 z-index 的各种值，但没有帮助。
嗯，我对 HAML 不太熟悉，所以渲染的 HTML 会很有帮助
我添加了指向 pastebin 的链接，因为这里粘贴的 HTML 不好。

标签： collapse bootstrap-typeahead typeahead

【解决方案1】：

我以某种方式找到了堆栈溢出的答案，解决方案是

.accordion-body.in { 溢出：可见； }

来自here。

很抱歉问了一个已经有答案的问题，但我真的找不到它，因为我没有猜到正确的搜索词。

【讨论】：

【解决方案2】：

应用以下 css 仅部分起作用，accordion-body.in { overflow:visible; }，因为它只显示正在展开的“切片”的溢出。您还需要将其应用于父级。另外上面的css会影响展开/折叠效果；即显示内容的内容显示在手风琴上，而不是逐渐显示。我尝试的解决方案是：

1. Apply the overflow:visible only to the parent, i.e. #myAccordion { overflow:visible } AND 
2. Apply overflow:visible only to the "slice" being opened when it is needed (on open), and removing it on close, like so:

    $("#myAccordion").collapse();
    // Here, we are attaching event handlers to the accordion "slice" body so that we can update it's overflow when opened AND when it's about to be closed.
    $("#myAccordion .accordion-body").on("shown", function () {
        $(this).css("overflow", "visible");
    });
    $("#myAccordion .accordion-body").on("hide", function () {
       $(this).css("overflow", "hidden");
    });

【讨论】：

【解决方案3】：

这对我有用，因为我的预输入在导航栏中

.navbar-collapse.in{
    /*allows typeahead to overflow nav bar during collapse*/
    overflow-y:initial !important;
}

【讨论】：