p:splitButton colored button doesn't work

Locked
pfroy
Posts: 31
Joined: 09 Sep 2015, 18:20

21 Dec 2015, 23:58

The Volt template provides different color styling for buttons. Ex.: GreenButton, RedButton, etc...

When I'm trying to apply the color styling to a Primefaces splitButton, nothing happends. The button color is not changed. Any idea why it doesn't work? Shouldn't the color could by applied to any type of buttons?

Code: Select all

<p:splitButton id="createButton" action="View?faces-redirect=true" value="Inspect" type="button" icon="ui-icon-plus fa fa-plus" styleClass="OrangeButton">
Best regards
Pierre
Primefaces 7.0
JSF 2.3
Java EE 8
Payara 5.184

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

22 Dec 2015, 10:10

Please try with;

Code: Select all

.OrangeButton .ui-button { background-color:#EF6C00;}
.OrangeButton .ui-button.ui-state-hover , .OrangeButton .ui-button.ui-state-focus {background-color:#FF7504 !important;}
We will add this fix into theme-variables.less for next release.

pfroy
Posts: 31
Joined: 09 Sep 2015, 18:20

22 Dec 2015, 21:48

Hi aragorn,

I did as you suggested, adding the css in a separate custom.css file. I'm keeping every overrides in a different css file. I'm looking forward a new release of Volt. when it is planned?

By the way the color is being changede to orange. But as soon as I apply the overridden class to the splitButton, it looses it's round corner. The button become totally square, unlike regular button. Please look at the screenshots.

Image

Image

Regards
Primefaces 7.0
JSF 2.3
Java EE 8
Payara 5.184

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

24 Dec 2015, 10:36

We decided not to add these changes in next release. Because, we saw some problems in our themes with my changes. So, please use OrangeButton(GreenButton, RedButton, etc.) for only buttons(p:commandButton, p:button).

You can try this code for your issue;

Code: Select all

.OrangeSplitButton .ui-button{
   background-color: #EF6C00;
}
.OrangeSplitButton.ui-state-hover .ui-button,
.OrangeSplitButton.ui-state-focus .ui-button{
   background-color: #FF7504 !important;
}

<p:splitButton styleClass="OrangeSplitButton" ...>
Screenshot;
Image

pfroy
Posts: 31
Joined: 09 Sep 2015, 18:20

02 Jan 2016, 10:23

Dear aragorn,

Thanks for the fix. I'll keep the changes on a separate custom.css for now until Volt is updated.

Now I see the orange splitButton, but the hover is not working. The button is staying the same color even if css specify a different hover color.

Need more help ;).

Code: Select all

.OrangeSplitButton .ui-button{
    background-color: #EF6C00;
}
.OrangeSplitButton.ui-state-hover .ui-button,
.OrangeSplitButton.ui-state-focus .ui-button{
    background-color: #FF7504 !important;
}
Primefaces 7.0
JSF 2.3
Java EE 8
Payara 5.184

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

03 Jan 2016, 12:49

Sorry for my mistake. Please try with;

Code: Select all

.OrangeSplitButton .ui-button{
    background-color: #EF6C00;
}
.OrangeSplitButton .ui-button.ui-state-hover,
.OrangeSplitButton .ui-button.ui-state-focus{
   background-color: #FF7504 !important;
}

<p:splitButton styleClass="OrangeSplitButton" ...>
Happy new year :)

Locked

Return to “Volt”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest