Make jsf selectOneMenu open upwards

I have a selectOneMenu at th开发者_运维技巧e bottom of my page and by default when I click it the menu drops below the bottom of the page. Is there a way to get it to render backwards (ie upwards)?

A self-respected browser will already do it automatically if there's no viewport room below the dropdown.

If you want to always drop it up, even though there's enough room in the viewport to drop it down, then your only solution is to turn it into a <ul><li> and throw in a bunch of CSS/JS code to make it look like a dropdown dropup. I Googled using keyword "dropup" and found those examples:

• http://aplus.rs/adxmenu/examples/hbt/
• http://www.pmob.co.uk/temp/dropup.htm

Update as per the comments: oh boy, why didn't you mention from the beginning on that you were using PrimeFaces' <p:selectOneMenu>? Since you didn't mention anything about 3rd party component libraries I assumed it to be the standard JSF <h:selectOneMenu>. The PrimeFaces one generates an <ul><li> to achieve the sexy look'n'feel!

I'm not going to dig in the whole bunch of PrimeFaces CSS to give you a fine-grained answer, but to start off, you need to set the following style in your custom CSS:

.ui-selectonemenu-panel {
    position: absolute !important;
    bottom: 0 !important;
}

This will cause the menu to go up instead of down. There are some stylistic misbehaviours (it hides the current selection), but that's up to you (just finetune the bottom to 30px or something). You can otherwise also just use a <h:selectOneMenu> and delegate the job to the browser.