1

そのため、ブートストラップの折りたたみがあり、その中にタブがあり、タブの1つにブートストラップのタイプアヘッドを持つtext_fieldを持つフォームがあり、問題はタイプアヘッドのドロップダウンが折りたたまれていないことです。

そのオートコンプリート付きの text_field は、そこにある最後の要素です。

ここに絵があります。

ドロップダウンが折りたたみ要素の下 (図の行の下) に展開されるようにしたい

編集:これがそのビューの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' は、私が求めているオートコンプリートのフィールドです。

編集：

これがレンダリングされた HTML です

4

3 に答える 3

1

次の css を適用しても部分的にしか機能しません。展開されている「スライス」のオーバーフローのみを表示するためです。親にも適用する必要があります。さらに、上記の 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-08T14:50:36.100 に答える
1

私はどういうわけかスタックオーバーフローの答えを見つけました。解決策は

.accordion-body.in {オーバーフロー:可視; }

ここからです。

すでに答えがある質問をして申し訳ありませんが、検索するのに適切な単語を推測できなかったため、本当に見つけることができませんでした。

于 2013-07-22T08:04:49.797 に答える