在相对于另一个组件的特定位置显示ap：overlayPanel（p：graphicImage）

Question

使用<p:overlayPanel>以显示<p:fileUpload>中，当<p:graphicImage>被点击如下。

<p:graphicImage id="image"
                library="default"
                name="test/Sunset.jpg"
                style="left: 400px; top: 100px; position: relative;"
                height="200"
                width="200"/>

<p:overlayPanel for="image" my="top left" at="bottom right"
                dynamic="true" showCloseIcon="true" dismissable="true">

    <p:fileUpload mode="advanced"
                  fileLimit="1"
                  allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                  fileUploadListener="#{bean.listener}"/>
</p:overlayPanel>

单击给定的<p:graphicImage> ，在<p:overlayPanel>中将显示<p:fileUpload> ，如下图所示。

我然而，需要显示这种<p:overlayPanel>持<p:fileUpload> ）的方式，此的右下角 <p:overlayPanel>在给定的左上角的位置<p:graphicImage> （只是因为这不必要地在实际实现此功能的浏览器中引入了难看的水平滚动条（在<p:dataTable> ））。

这些属性my="top left" at="bottom right"可以达到目的，但实际上却没有。

反正这是可以实现的吗？

---

根据答案 ，上传文件时， <p:fileUpload>如下所示。

远离删除浏览器中的水平滚动条。

Answer 1

一种方法是使用onsh​​ow事件动态调整<p:overlayPanel>大小，以匹配<p:graphicImage>尺寸。

这是一个例子：

<h:form id="form">
    <p:graphicImage id="img" value="/res/img/img.jpg" />

    <p:overlayPanel id="overlay" for="img" my="right bottom" at="left bottom" onShow="resize();" >
        <p:fileUpload />
    </p:overlayPanel>

    <script type="text/javascript">
        function resize() {
            $("[id='form2:overlay']").css("left", "auto");
            $("[id='form2:overlay']").css("right", $("[id='form2:img']").css("width"));
        }
    </script>
</h:form>

编辑：

修复了在表单内部工作的代码。

编辑2：

更改了代码，以将叠加层的右侧动态放置在img的左侧。 由于img位于右侧的最后一个表格列中，因此我们可以从右侧的绝对位置减去img的宽度。