如何覆盖primefaces OneMenu的位置？

Question

如何覆盖primefaces OneMenu以便通过验证码查看它，即下面？我的selectOneMenu没有任何变化。

Answer 1

我的猜测是，菜单面板没有足够的空间放在下半部分，而是位于上方，因为面板的对齐方式是由javascript设置的（{{3} }），使用jQuery UI PrimeFaces.widget.SelectOneMenu.alignPanel方法，它允许您相对于窗口，文档，另一个元素或光标/鼠标定位元素，而不必担心偏移父项，以及{{1的默认值}属性是flip（.position()）导致定位元素在某个方向上溢出窗口，或者将其移动到另一个位置。

在这种情况下，您可以实施以下三种解决方案之一：

• 延长下半部分的空间，可能会增加边距 验证码，通过这种方式，面板可以放在底部。

• 或更改面板的高度

  collision

  缩短它以使它适合。

• 或您可以覆盖<p:selectOneMenu height="100" > 功能 在位置函数中将PrimeFaces.widget.SelectOneMenu.alignPanel属性设置为collision：

  PrimeFaces 5

  none

  PrimeFaces 4

  PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {
     if(this.panel.parent().is(this.jq)) {
         this.panel.css({
             left: 0,
             top: this.jq.innerHeight()
         });
     }
     else {
         this.panel.css({left:'', top:''}).position({
             my: 'left top'
             ,at: 'left bottom'
             ,of: this.jq
             ,collision: 'none' // changing from flipfit to none
         });
     }
  }
  

  当然，您应该在 document.ready 中调用它，以及更新组件时。  我不太推荐这种方法，但有时它是唯一的解决方案。

希望这有帮助。

Answer 2

对于必要的SelectOneMenu添加样式top，找到最佳值并应用它。对我来说是：

#registrationForm\:facultyList_panel {
    top: 413px !important;
}

更新09.07：这对其他屏幕分辨率没有帮助。这个问题仍然具有现实意义。