CODEWITHSUNDEEP
cssprimefacesjsf-2.2
user8232074
user8232074

Reputation: 47

positionning a command button on the right

I'm using jsf2.2 primefaces 6.0 and i already implemented a graphical solution to view, download and print pictures through galleria component of primefaces.

The issue is that I need help positioning the print commandButton on the right for best ergonomic result.

Here's the wanted result:

Print button on the right

Here the XHTML code:

<p:dialog header="Documents numérisés" widgetVar="diag" modal="true"
                dynamic="true" showEffect="fade" hideEffect="fade" resizable="true"
                position="center" id="diagImages" onShow="download()">
                <p:outputPanel id="gal" style="text-align:center;">
                    <p:galleria value="#{demandeBean.demandeSelectionnee.images}"
                        panelWidth="500" panelHeight="313" showCaption="false"
                        autoPlay="false" var="image">
                        <p:graphicImage id="image"
                            value="http://localhost:18080/openCars/images/#{image}"
                            width="500" height="313" />
                    </p:galleria>
                </p:outputPanel>
                <p:commandButton value="Print" type="button" icon="ui-icon-print" 
                    style="display:block;margin-bottom: 20px">
                    <p:printer target="image" />
                </p:commandButton>
            </p:dialog>

Upvotes: 1

Views: 9765

Answers (1)

Dennis
Dennis

Reputation: 186

Well, this may not be a perfect solution but it worked for me.

<p:panelGrid>
<p:commandButton value="Print" type="button" icon="ui-icon-print"
style="float:right;">
<p:printer target="image" />
</p:commandButton>
<p:panelGrid>

Upvotes: 4

Related Questions