css - How to override position of primefaces OneMenu? -
how override primefaces onemenu in order see on captcha, ie below? selectonemenu have no changes.
my guess menu panel doesn't have enough space fit in lower part, instead it's positioned above, aligning of panel being set javascript (primefaces.widget.selectonemenu.alignpanel), using jquery ui .position() method allows position element relative window, document, element, or cursor/mouse, without worrying offset parents, , default value collision
attribute flip (in primefaces 5 it's flipfit) resulting positioned element overflows window in direction, or move alternative position.
in case implement 1 of these 3 solutions:
- extend space on lower part, maybe adding margin captcha, in way panel fit in bottom.
or change hight of panel
<p:selectonemenu height="100" >
making bit shorter can fit.
or can override
primefaces.widget.selectonemenu.alignpanel
function setcollision
attributenone
, in position function: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 flipfit 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 default flip none }); }
of course should call in document.ready, , when update component. don't recommend approach much, it's solution.
hope helps.
Comments
Post a Comment