When a button is created, the class ui-corner-all
is always applied. I tried the following:
<p:commandButton id="like" styleClass="ui-corner-right" />
but it didn't work. On Firebug, I saw both ui-corner-all
and ui-corner-right
:
<div id="form1:like" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-left ui-corner-right">
UPDATE 1:
Following the hint from JMelnik, I finally succeeded to change the style of ui-corner-all
to ui-corner-right
by adding the following script:
<style type="text/css">
#myForm\:likeButton .ui-corner-all {
border-radius: 6px 0px 0px 6px !important;
}
</style>
and wrap the <p:commandButton>
inside <h:panelGroup>
as following:
<h:form id="myForm">
<h:panelGroup id="likeButton">
<p:commandButton />
<h:panelGroup>
</h:form>
UPDATE 2:
Thanks to BalusC's suggestion, the following solution should be better:
<style type="text/css">
.likeButton .ui-corner-all {
border-radius: 6px 0px 0px 6px !important;
}
</style>
<h:panelGroup styleClass="likeButton">
<p:commandButton />
<h:panelGroup>
Best regards,
Use a standard CSS override way.
Include a *.css in your page, where you redefine ui-corner-all
and ui-corner-right
classes.
.ui-corner-all {
//ovverides to nothing, you can also define any properties you want here
}
.ui-corner-right {
//define properties which would override unwanted behaviour
}
You can also apply additional css class which would override undesired properties.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With