4 Replies Latest reply on Jun 19, 2015 1:10 AM by Sandeep Singh

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

    Sandeep Singh Newbie

      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

        • 1. Re: How to fix the navigation button layout to be always visible on a rich:popup panel
          liumin hu Master

          hi,

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

          • 2. Re: How to fix the navigation button layout to be always visible on a rich:popup panel
            Sandeep Singh Newbie

            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

            • 3. Re: Re: How to fix the navigation button layout to be always visible on a rich:popup panel
              liumin hu Master

              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>
              
              • 4. Re: How to fix the navigation button layout to be always visible on a rich:popup panel
                Sandeep Singh Newbie

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