CODEWITHSUNDEEP
jsfprimefacesjsf-2.2
Tiny
Tiny

Reputation: 27899

Display a p:overlayPanel at a specific position relative to another component (p:graphicImage)

Using a <p:overlayPanel> to display a <p:fileUpload>, when a <p:graphicImage> is clicked as follows.

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

When the given <p:graphicImage> is clicked, a <p:fileUpload> is displayed in a <p:overlayPanel> as can be seen in the following picture.

enter image description here

I however, need to display this <p:overlayPanel> (holding a <p:fileUpload>) in a way that the bottom right corner of this <p:overlayPanel> positions over the top left corner of the given <p:graphicImage> (just because this unnecessarily introduces an ugly horizontal scroll bar on the browser where this is actually implemented (inside a <p:dataTable>)).

These attributes my="top left" at="bottom right" are expected to do the trick but they do not.

Is this achievable anyway?

According to the answer, <p:fileUpload> looks like the following, when a file is uploaded.

enter image description here

Which stays away from removing the horizontal scroll bar in the browser.

Upvotes: 1

Views: 9230

Answers (1)

Thrax
Thrax

Reputation: 1964

One way to do it is to dynamically resize the <p:overlayPanel> with an onshow event to match the <p:graphicImage> dimensions.

Here's an example :

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

EDIT :

Fixed code to work inside a form.

EDIT 2:

Changed code to dynamically position overlay's right side on img's left side. Since the img in in the last table column on the right, we can just substract img's width from right absolute position.

Upvotes: 1

Related Questions