How to fix the navigation button layout to be always visible on a rich:popup panel

[sandy4you]

I have a rich:popupPanel in which there can many contents. Also there are navigation button (Cancel, Back, Save and Next) which are always displayed at the bottom based on the height of the popup as set. If the content is bigger than height set for the popup then we get a scroll-bar as usual.

My requirement is that even if the content on the page is more than the height of the popup, I still want to display the navigation button to the user without scrolling at the bottom.

I'm using rich faces 4.x with JSF 2.x vesion.

Kindly help.

Regards, Sandy

[liuliu]

hi,

you can use css position:absolute in your popup panel.

[sandy4you]

Hi Liumin,

I fixed the navigation panel by providing the position:absolute but the problem is that I'm fixing the height and width of the Popup Panel as shown below:

<rich:popupPanel

            id="#{cc.attrs.workflowTypeId}"

            rendered="#{workflowController.workflowTypeId == cc.attrs.workflowTypeId}"

            show="true" moveable="true" resizeable="true"

            left="#{workflowPopupLayout.left}"

            top="#{workflowPopupLayout.top}"

            width="#{workflowPopupLayout.width}"

            height="#{workflowPopupLayout.height}"

            modal="#{cc.attrs.modal}"

            header="#{workflowController.workflowTitle}"

            onshow="focusInput()">

This same code work perfectly fine for more than 10 workfows but in 2 workflows width and height get overridden by element.style as show below:

element.style {

    height: 725px;

    left: 100px;

    position: fixed;

    top: 70px;

    width: 600px;

    z-index: 100;

}

Need help to fix.

By default I'm setting the height:400px and width:645px.

Thanks & Regards,

Sandy

[liuliu]

hi,

I think you missed something, When i said set some div on position absolute, i mean in the popup panel, not on the popup panel. something like this

<rich:popupPanel>
<div style="position:relative;height:100%;">
  <div style="position:absolute;">
  </div>
  <div style="position:absolute;">
  </div>
</div>
</rich:popupPanel>

[sandy4you]

<h:panelGroup

                layout="block"

                id="workflowNavigationPanel"

                style="right: 20px; bottom: 15px; position: absolute;"

                styleClass="paddingTopGrid"

                rendered="#{cc.attrs.displayNavigationPanel}">

<!-- All the Button here -->

</h:panelGroup>

within the rich:popup panel and no matter how small or big the popup size is the navigation buttons are always displayed.