更改其位置时Popper.js箭头位置不会改变

时间:2019-12-30 03:06:25

标签: javascript popup popper.js

我已经在一个小项目中实现了popper.js,但是我有一个小项目,带有指向参考元素的箭头,因为当您从底部到顶部更改弹出窗口的位置时,箭头没有改变,我附上我的初始化代码和一些显示问题的图像,希望您能为我提供帮助,谢谢。

<div id="${num_transaccion}" class="d-none popup">
<div class="arrow"></div>
<div class="container-body">
<table class="table table-popover">
<thead>
  <tr>
      <th>#Folio Programado</th>
      <th>#Grupo</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>#Folio Programado</td>
      <td>#Grupo</td>
  </tr>
 </tbody>
</table>
</div>
</div>

我正在使用datatables jquery插件将表包装到具有水平滚动的div中, 这是我的popper.js代码初始化:

var num_trans = $(this).data("num-transaction");

let reference = $(this);
let popup = $(num_trans);
new Popper(reference, popup, {
  placement: "top",
  modifiers: {
    keepTogether: { enabled: false },
    arrow: {
        enabled: true,
        element: '.arrow'
     }
  }
});

我的弹出式CSS代码:

.arrow {
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;

}

.popup[x-placement="bottom"] .arrow {
  margin-top: -10px;
  border-bottom: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.popup[x-placement="top"] .arrow {
  margin-top: -10px; /* This must be change I think */
  border-top: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.popup {
    max-width: 80%;
    width: 100%;
    padding: 10px;
}

问题的一些图像,当popper.js的位置更改为顶部时,箭头不会更改其位置: enter image description here

enter image description here

0 个答案:

没有答案