在相对于另一个组件的特定位置显示 p: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:fileUpload> 会显示在<p:overlayPanel> 中，如下图所示。

但是，我需要以 右下角此<p:overlayPanel> 位于左上角 给定的<p:graphicImage> （只是因为这不必要地在浏览器上引入了一个丑陋的水平滚动条，实际上是在其中实现的（在<p:dataTable> 内）。

这些属性my="top left" at="bottom right" 应该可以解决问题，但实际上并没有。

这是否可以实现？

---

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

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

Answer 1

一种方法是使用 onshow 事件动态调整 <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的宽度。