Eva Mariam Eva Mariam - 5 months ago 81
CSS Question

p:selectOneMenu panel appears cutoff

Using primefaces 5.1.
I had an issue with

selectonemenu
panel scrolling with page. To solve that I put a
appendTo
attributue. But now selectonemenu panel appears to be cutoff by a div. Can any suggest how to bring the panel to front of the wrapper div?

Also tried removing overflow from style (as suggested by narendra.lodhi)..but the div (meant to be displayed to user ) aligns into a single line to top..there is no border on left right and bottom ..border only appears at the top..is any other way fix this issue keeping the border?

enter image description here

I tried z-index which was of no use.

<h:form prependId="false" id="asdf">

<div
style="display: block; overflow: hidden; border: 1px solid #cdcdcd; width: 99%; height: 80%">
<div style="width: 40%; padding: 1%; float: left">

<p:selectOneMenu size="2" id="minEditService" appendTo="@this">
<f:selectItem itemLabel="00" itemValue="0" />
<f:selectItem itemLabel="05" itemValue="5" />
<f:selectItem itemLabel="10" itemValue="10" />
<f:selectItem itemLabel="15" itemValue="15" />
<f:selectItem itemLabel="20" itemValue="20" />
<f:selectItem itemLabel="25" itemValue="25" />
<f:selectItem itemLabel="30" itemValue="30" />
<f:selectItem itemLabel="35" itemValue="35" />
<f:selectItem itemLabel="40" itemValue="40" />
<f:selectItem itemLabel="45" itemValue="45" />
<f:selectItem itemLabel="50" itemValue="50" />
<f:selectItem itemLabel="55" itemValue="55" />
</p:selectOneMenu>
<br /> <br /> <br /> <br /> <br />
</div>
</div>

</h:form>

Answer

Resolved the issue by replacing the div tags with panelgrid and panelgroup.

<h:panelGrid columns="2" style="width:100%; border: 1px solid #cdcdcd; ">
    <h:panelGroup style="width:49%; padding: 1%;">
Comments