css - How to override position of primefaces OneMenu? -


enter image description here

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 set collision attribute none, 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

Popular posts from this blog

database - VFP Grid + SQL server 2008 - grid not showing correctly -

jquery - Set jPicker field to empty value -

.htaccess - htaccess convert request to clean url and add slash at the end of the url -