テーブルに設置したドロップダウンの展開された内容とボタンが重なる原因

Question

前提・実現したいこと

オンラインの無料学習サイトでBootstrapを学習しました
そこで最近、公式サイトの日本語訳サイトを読んで、色々な組み合わせをして遊んでいます
その中で「Tables」と「Dropdowns」を組み合わせていた際の疑問です
質問に書かれているソースコードの動作確認は「Google Chrome 70」で行っています

発生している問題・エラーメッセージ

「Tables」と「Dropdowns」を組み合わせるとドロップダウンを開いた際、ドロップダウンのボタンが隠れます

これは正しい動作でしょうか？もし正しい動作なら、どうすればボタンが隠れないようにできるのでしょうか？

該当のソースコード

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </td>
      </tr>

    </tbody>
  </table>
</div>

何か見落としている所があれば教えて頂きたいです
よろしくお願いします

Answer 1

Bootstrap 4 で使われている Popper.js には、data-displayオプションというオプションがあり、これが Bootstrap ではデフォルトでdynamicに設定されています。

const Default = {
  offset    : 0,
  flip      : true,
  boundary  : 'scrollParent',
  reference : 'toggle',
  display   : 'dynamic'
}

これにより、ドロップダウンの下部に十分スペースが無い場合、ドロップダウンメニューがドロップダウンメニューのボタンの上に表示出来るように配置されます。ドロップダウンを常に下に表示するためには、ドロップダウンを下部に表示出来る程度の十分な領域を確保するか、data-displayオプションを無効化する必要があります。前者の具体的な手順としては、paddingプロパティやheightプロパティなどの値を調整し、結果としてドロップダウンが表示可能な領域を確保すれば良いです。後者の場合の手順は、ドロップダウンメニューのボタンにdata-display属性を設定し、その値をstaticとすれば良いです。

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th>Heading</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>
          <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button"
                    id="dropdownMenuButton" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false" data-display="static">
              Dropdown button
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

蛇足ですが、ドロップダウンの位置はtransformプロパティにより制御されているので、.dropdown-menuに対してtransformプロパティを設定し、設定された値を上書きすることでも、解決することが出来ます。しかし、可能な限り、回答文に記述したような解決方法が好ましいと思います。

---

参考: Dropdowns - Options · Bootstrap

Comments

[willii]

Bootstrapに付属したライブラリの影響でしたか。盲点でした
とても理解の助けになりました
詳細な回答をしてくださりありがとうございました