Sentinel2.1 selectOneButton shows circle in background

Post Reply
zeeshan.rb
Posts: 22
Joined: 26 Jan 2014, 07:39

23 Mar 2017, 06:57

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 ?

User avatar
aragorn
Posts: 2984
Joined: 29 Jun 2013, 12:38

23 Mar 2017, 12:19

Please remove "Fleft BordRadHalf TexAlCenter" class on selectOneButon. Also, you can add only "ui-fluid" class for responsive feature.

zeeshan.rb
Posts: 22
Joined: 26 Jan 2014, 07:39

23 Mar 2017, 12:59

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.

User avatar
aragorn
Posts: 2984
Joined: 29 Jun 2013, 12:38

24 Mar 2017, 09:34

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?

zeeshan.rb
Posts: 22
Joined: 26 Jan 2014, 07:39

27 Mar 2017, 08:25

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.

User avatar
aragorn
Posts: 2984
Joined: 29 Jun 2013, 12:38

27 Mar 2017, 10:38

Thanks for the update!

Post Reply
  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests