在右侧定位命令按钮

时间:2017-06-29 13:53:38

标签: css3 primefaces jsf-2.2

我正在使用jsf2.2 primefaces 6.0,我已经实现了一个图形解决方案,通过主要广告的galleria组件查看,下载和打印图片。

问题是我需要帮助将打印件commandButton放在右侧,以获得最佳的人体工程学效果。

这是想要的结果:

Print button on the right

这里是XHTML代码:

<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>

1 个答案:

答案 0 :(得分:1)

嗯,这可能不是一个完美的解决方案,但它对我有用。

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