Make Select One Menu primefaces overlayed

Question

The <p:menu/> component in Primefaces allows to overlay the Menu next to an element but it generates a <div> with <ul>as a child. I am wondering if it is at all possible to get the overlaying but using <p:selectOneMenu/>component; which generates a <div> > <select> element in the DOM.

I have a column which repeats 4 rows in this case. Every row has three elements: a div, a label and the Select One Menu. What I want is to be able to overlay this select menu. I tried to change the values of visibility: hidden but the element still occupies that space.

<div class="v-model-container-column">
            <p:repeat value="#{yAxis}" var="y" varStatus="varStatusY">
             <div class="v-model-container-row">   
                <div class="v-model-rhombus v-model-rightV">

                </div>
                <p:outputLabel id="testLevelLabel" value="#{y.name}" styleClass="v-model-label"/>
                <p:selectOneMenu value="#{selectionMap[y]}"
                                 converter="viewResourceConverter"
                                 onchange="vModel.select(this)" >
                    <f:selectItems value="#{xAxis}" />
                </p:selectOneMenu>
            </div>
            </p:repeat>
        </div>

https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone — Kukeltje, Sep 04 '19 at 18:00
The first one, I used a workaround keeping the selectOneMenu and using jQuery selectors to manipulate DOM elements so it can be clicked. — EdUrbinaDev, Sep 05 '19 at 21:13
Then I have honestly no clue what your real problem is... I suspect you work around something that might be solved with the second comment — Kukeltje, Sep 05 '19 at 21:39

Make Select One Menu primefaces overlayed

0 Answers0