在相对于另一个组件的特定位置显示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:fileUpload>），使得<p:overlayPanel>位置的右下角位于<给定<p:graphicImage>的strong>左上角（仅仅因为这会在浏览器上不必要地引入一个丑陋的水平滚动条，实际上是在<p:dataTable>内）。

这些属性my="top left" at="bottom right"预计可以解决这个问题，但事实并非如此。

无论如何这是否可以实现？

---

根据answer，<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的宽度。