bootstrap typehead dropdown doesn't expand over bootstrap collapse

Question

So I have bootstrap collapse and inside it I have tabs, and inside one of the tabs I have a form with text_field that has bootstrap typeahead and the problem is that typeahead's dropdown dosn't expand over collapse.

that text_field with autocomplete is the last element in there.

here is the picture.

I want that dropdown expands below the collapse element (below the line on the picture)

EDIT: Here is the haml for that view

- @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' is the field with autocomplete I am asking about.

EDIT:

and here is the rendered HTML

Answer 1

I somehow find the answer on stack overflow the solution is

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

It is from here.

I am sorry for asking question that already has the answer but I really was not able to find it because I didn't guess the right word for searching.

Answer 2

Applying the following css works only partially, accordion-body.in { overflow:visible; }, since it only displays the overflow of the "slice" that is being expanded. You'd need to apply it to the parent as well. In addition the above css affects the expand/collapse effect; i.e. the content of what is being shown get's displayed over the accordion, versus gradually being shown. A solution I tried is to:

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");
    });

Answer 3

This worked for me since my typeahead is in a navbar

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