CODEWITHSUNDEEP
primefacesxhtml
1001001
1001001

Reputation: 47

How to resize button in primefaces?

In Primefaces ShowCase is an example how to use an effects. One of these I used for button - resize.

    <p:commandButton type="button" value="Show" style="width:200px" icon="ui-icon-image">
        <p:effect type="size" event="mouseover">
            <f:param name="to" value="{width:300}" />
        </p:effect>
    </p:commandButton>

Similar example is on this page "Size"

It works, but after the button resize to 300px it come bak to original size. And I want to resize it to 300px and stop it on this size. It is possible? How?

Hope you understand what I try to do. Thank you.

Upvotes: 1

Views: 3194

Answers (1)

Mathieu Castets
Mathieu Castets

Reputation: 6040

If you don't want your button to reset to 200px then you'd better use pure jQuery.

Here is a working example:

<p:commandButton styleClass="expandableBtn" type="button" value="Show" style="width: 200px" icon="ui-icon-image" />

<script type="text/javascript">
//<![CDATA[
jQuery(function () {
     $('.expandableBtn').on('mouseover', function() {
          $(this).css('width', '300px');
     });
});
// ]]>
</script>

If you want to take advantage of the "transition effect" then replace $(this).css('width', '300px'); with:

$(this).animate({
    width: '300px'
}, 1000, function () {
    // Transition complete
});

Where 1000 is the duration (in ms) of the transition.

Upvotes: 2

Related Questions