Page 1 of 1

Sentinel2.1 selectOneButton shows circle in background

Posted: 23 Mar 2017, 06:57
by zeeshan.rb
I am using primefaces 6.0 with Sentinel 2.1.

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.
Image

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>
Could the css border style of ui-selectonebutton be an issue ?

Re: Sentinel2.1 selectOneButton shows circle in background

Posted: 23 Mar 2017, 12:19
by mert.sincan
Please remove "Fleft BordRadHalf TexAlCenter" class on selectOneButon. Also, you can add only "ui-fluid" class for responsive feature.

Re: Sentinel2.1 selectOneButton shows circle in background

Posted: 23 Mar 2017, 12:59
by zeeshan.rb
aragorn wrote:
23 Mar 2017, 12:19
Please remove "Fleft BordRadHalf TexAlCenter" class on selectOneButon. Also, you can add only "ui-fluid" class for responsive feature.
If i remove Fleft BordRadHalf TexAlCenter and instead add "ui-fluid", i see each of the buttons appearing one below the other, instead of appearing one next to the other.

Re: Sentinel2.1 selectOneButton shows circle in background

Posted: 24 Mar 2017, 09:34
by mert.sincan
When you add ui-fluid class for selectOneButton, it adjusts itself according to the width of the parent element. What is the behavior you expect? Could you please attach a screenshot?

Re: Sentinel2.1 selectOneButton shows circle in background

Posted: 27 Mar 2017, 08:25
by zeeshan.rb
I think because i added ui-fluid, the buttons were appearing one below another due to less width.
This is acceptable to me.
Thanks aragorn. I appreciate your help.

Re: Sentinel2.1 selectOneButton shows circle in background

Posted: 27 Mar 2017, 10:38
by mert.sincan
Thanks for the update!