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下拉不會擴展在引導程序崩潰

回答

相關問題