Repositioning nav buttons in p:wizard

Question

I wish to place the navigation buttons right under the step titles of the primefaces wizard component:

Since primefaces generates the both step tiles and content of the wizard together, I wasn't sure on how to insert an element (in this case, the nav buttons) between the two parts of the wizard component. Anyway to do this?

Thanks :)

Answer 1

The easiest solution is to set your wizard not to show the navigator buttons, then create a button of your own:

<p:wizard widgetVar="myWizard" showNavBar="false" ... >
<p:commandButton style="..." value="Back" icon="ui-icon-arrow-1-w" 
    iconPos="right" type="button" onclick="myWizard.back();" />

<p:commandButton style="..." value="Next" icon="ui-icon-arrow-1-e" 
    iconPos="left" type="button" onclick="myWizard.next();" />

---

You can also do this with jQuery and CSS, but in my opinion it is more difficult this way.

Edit :-

For Primefaces5.1 +

<p:commandButton style="..." value="Back" icon="ui-icon-arrow-1-w" iconPos="right" onclick="PF('myWizard').back()" />
<p:commandButton style="..." value="Next" icon="ui-icon-arrow-1-e" iconPos="left" onclick="PF('myWizard').next();" />

Answer 2

I know the question is a bit outdated but maybe this will help someone. In addition to patstuart's answer (a great one that really helped me, +1) you can put these controls inside a div with CSS like this:

.formControlsBottom {  position: absolute !important;  bottom: 15px !important;  right: 15px !important;}

xhtml:

<div class="formControlsBottom">
    <p:commandButton value="Back" icon="ui-icon-arrow-1-w" iconPos="right" type="button" onclick="PF('myWizard').back();"/>
    <p:commandButton value="Next" icon="ui-icon-arrow-1-e" iconPos="left" type="button" onclick="PF('myWizard').next();"/>
</div>

I use it for positioning the buttons in the bottom of my dialogs.