When i use selectOneButton (4 buttons) inside a dialog, i see a eliptical circle in the background of selectOneButton.
My observation is that, the eliptical circle appears only when the width of the container is less. Particularly when 2 button come below other 2 buttons due to less container width.
can anyone explain how to remove this eliptical circle.
Below is the dialog box code which i have put inside topbar.xhtml, which came along with the layout.
Code: Select all
<!-- Dialog box to show User Preferences -->
<p:dialog header="User Preferences" widgetVar="dlgUserPref" modal="true" responsive="true">
<h3 class="hardblue">Set your preferences</h3>
<p:panelGrid columns="2" layout="grid">
<h:outputText value="Column Layout : " />
<p:selectOneButton value="#{userdashboard.uiColumn}" styleClass="Fleft BordRadHalf TexAlCenter">
<p:ajax process="@this" listener="#{userdashboard.updateUIColumnLayout}" update="tabViewId" />
<f:selectItem itemLabel="1" itemValue="100" />
<f:selectItem itemLabel="2" itemValue="50" />
<f:selectItem itemLabel="3" itemValue="33" />
<f:selectItem itemLabel="4" itemValue="25" />
</p:selectOneButton>
</p:panelGrid>
</p:dialog>