CODEWITHSUNDEEP
cssjsf-2positionrichfacespopuppanel
Ikthiander
Ikthiander

Reputation: 3917

how to make richfaces popup the popuppanel upwards

The link contains an example of richfaces 4 popuppanel: richfaces popuppanel example

Here is the code:

<rich:toolbar height="26px" id="tb">
    <rich:toolbarGroup location="right">
        <h:outputLink value="#">
            <rich:componentControl event="click" operation="show" target="ls">
                <a4j:param name="event" value="event" noEscape="true" />
                <rich:hashParam>
                    <a4j:param noEscape="true" name="top"
                               value="jQuery(#{rich:element('tb')}).offset().top + jQuery(#{rich:element('tb')}).height()" />
                    <a4j:param noEscape="true" name="left"
                               value="jQuery(#{rich:element('tb')}).offset().left + jQuery(#{rich:element('tb')}).width() - p_width" />
                </rich:hashParam>
            </rich:componentControl>
            Search
        </h:outputLink>
    </rich:toolbarGroup>
</rich:toolbar>
<rich:popupPanel header="Enter Search Terms" id="ls" autosized="true" modal="false" moveable="false" resizeable="false" followByScroll="false" >
    <h:panelGrid columns="3">
        <h:outputText value="Search:" />
        <h:inputText />
        <h:outputLink onclick="#{rich:component('ls')}.hide(event); return false;" value="#">Search
        </h:outputLink>
    </h:panelGrid>
</rich:popupPanel>
<h:outputScript type="text/javascript" target="body">
    p_width = #{rich:component('ls')}.width();
</h:outputScript>

But the popup is appearing in random places, i.e. sometimes under the bar, and then have to scroll and sometimes above. Is it possible to make sure it always appears right above the bar while being attached to it?

Upvotes: 0

Views: 765

Answers (1)

Makhiel
Makhiel

Reputation: 3884

The top and left parameters set the position of the panel, change them to where you want the panel to be, or call the method directly:

RichFaces.component('panelId').show(null, {top: "800px", left: "500px"})

You're using the part of the example that specifically sets the panel under the bar so it shouldn't be surprising when the panel appears there.

Upvotes: 2

Related Questions