Eva Mariam Eva Mariam - 3 months ago 51
CSS Question

p:selectOneMenu panel appears cutoff

Using primefaces 5.1.
I had an issue with

panel scrolling with page. To solve that I put a
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">

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" />
<br /> <br /> <br /> <br /> <br />



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%;">