bootstrap typehead下拉不会扩展在引导程序崩溃

所以我有引导程序崩溃，并在其中我有选项卡，并在其中一个选项卡我有一个窗体与text_field具有引导typeahead和问题是typeahead的下拉dosn' t扩大崩溃。bootstrap typehead下拉不会扩展在引导程序崩溃

带有自动完成的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：运动，：id =>'add_training_exercise'是自动完成的字段，我正在问。

编辑：

and here is the rendered HTML

来源

2013-07-20 Azaryan

这看起来像z-index的问题。请张贴您的HTML和CSS的一些代码 –

我添加了haml代码，就是这一切，没有自定义CSS这部分。我尝试使用'.typeahead {z-index：99999999！important;}'和z-index的各种值，但它没有帮助。 – Azaryan

嗯我不太熟悉HAML，所以呈现的HTML会有很大帮助 –

我莫名其妙地找到堆栈溢出的答案解决方案是

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

它是从here。

我很抱歉提问题已经有答案，但我真的无法找到它，因为我没有猜出正确的单词进行搜索。

来源

2013-07-22 08:04:49 Azaryan

部分应用以下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"); 
    });

来源

2014-04-08 14:50:36 Yesi

这为我工作，因为我的预输入是在导航栏

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

来源

2017-04-22 16:29:23 TheGhoul

bootstrap typehead下拉不会扩展在引导程序崩溃

回答

相关问题