css - 如何覆盖 primefaces OneMenu 的位置？

Question

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

Answer 1

我的猜测是菜单面板没有足够的空间放在下部，而是位于上方，因为面板的对齐方式是由 javascript ( PrimeFaces.widget.SelectOneMenu.alignPanel ) 使用 jQuery UI .position() 方法设置的允许您相对于窗口、文档、另一个元素或光标/鼠标定位元素，而不必担心偏移父元素，collision 属性的默认值是翻转(In PrimeFaces 5 it's flipfit)，从而导致定位元素在某个方向溢出窗口，或者将其移动到另一个位置。

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

• 扩展下半部分的空间，也许增加边距验证码，这样面板将适合底部。

• 或改变面板的高度

  <p:selectOneMenu height="100" > 
  

  让它更短一点，以便它适合。

• 或者您可以覆盖PrimeFaces.widget.SelectOneMenu.alignPanel 函数在位置函数中将 collision 属性设置为 none:

  PrimeFaces 5

  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
         });
     }
  }
  

  PrimeFaces 4

  PrimeFaces.widget.SelectOneMenu.prototype.alignPanel = function() {        
     var fixedPosition = this.panel.css('position') == 'fixed',
     win = $(window),
     positionOffset = fixedPosition ? '-' + win.scrollLeft() + ' -' + win.scrollTop() : null;
  
      this.panel.css({left:'', top:''}).position({
         my: 'left top'
        ,at: 'left bottom'
        ,of: this.jq
        ,offset : positionOffset
        ,collision: 'none' // changing from default flip to none
     });
  }
  

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

希望这对您有所帮助。