primefaces - Put wizard navbar on top position -

i'm working wizard component. navbar in botton boss wants me put in top of wizard,i thought attribute or tag straight forward have been reviewing documentation , should wrong (i found shownavbar tag).

is there way without css or jquery? (we have problems in application setting css when working components avoid it).

thank much

you can achieve in either of 2 ways:

1 - extending wizardrenderer

by extending wizradrenderer can change order of encoding.

in original renderer encodecontent(facescontext, wizard); called before encodenavigators(facescontext, wizard); it's pretty simple, extend custom renderer, change order of calls.

public class exnavwizardrenderer extends org.primefaces.component.wizard.wizardrenderer{     @override    protected void encodemarkup(facescontext facescontext, wizard wizard) throws ioexception {        responsewriter writer = facescontext.getresponsewriter();        string clientid = wizard.getclientid(facescontext);        string styleclass = wizard.getstyleclass() == null ? "ui-wizard ui-widget" : "ui-wizard ui-widget " + wizard.getstyleclass();         writer.startelement("div", wizard);        writer.writeattribute("id", clientid, "id");        writer.writeattribute("class", styleclass, "styleclass");        if(wizard.getstyle() != null) {            writer.writeattribute("style", wizard.getstyle(), "style");        }         if(wizard.isshowstepstatus()) {            encodestepstatus(facescontext, wizard);        }        // encode navigators before content        if(wizard.isshownavbar()) {            encodenavigators(facescontext, wizard);        }         encodecontent(facescontext, wizard);         writer.endelement("div");    } } 

update faces-config.xml

<render-kit>     <renderer>         <component-family>org.primefaces.component</component-family>         <renderer-type>org.primefaces.component.wizardrenderer</renderer-type>         <renderer-class>com.projectpackage.exnavwizardrenderer</renderer-class>     </renderer> </render-kit> 

---

2 - jquery

in document.ready can change dom, example same renderer:

$('.ui-wizard-step-titles').after($('.ui-wizard-navbar'))