typeaheadbootstrap-typeahead

bootstrap typehead dropdown doesn't expand over bootstrap collapse


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


Solution

  • 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.