iframeでボタンのドロップダウン・メニューがスクロールに追従する。

ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

問題

• この記事では、iframe内のスクロール操作にボタンのドロップダウンメニューが追従するケースと、その解決方法について詳しく説明します。

Environment

• Liferay DXP 7.1

解決策

• iframeの場合、 popper.jsはスクロール時にドロップダウンメニューを移動させます。 これを所定の位置に固定するために、以下の内容を記載してください：

  • data-display="static"

ここでは、ドロップダウン・ボタンのコードの完全な例を示します：

<button
      aria-expanded="false"
      aria-haspopup="true"
      class="btn btn-secondary dropdown-toggle"
 data-display="static"
      data-toggle="dropdown"
      id="dropdownAlignment1"
      type="button"
    >