2 Replies Latest reply on Mar 24, 2010 1:42 PM by Joe Greene

    how to set rich:page to 100% height and width

    Joe Greene Novice

      Hello -

      i'm using a rich:header, rich:layout, and rich:footer, and want to lay out my page with the header at the very top, the footer at the very bottom, and of course the layout centered in the middle.


      I thought part of the appeal of these components was to easily be able to stretch the page content to fill the screen, having the resizing taken care of automagically.  My width seems to be ok, but I need to stretch the content to full height.  There doesn't appear to be a "height" attribute on the rich:page component.  I've tried playing with the CSS styles, but to no avail.  I've seen an example in these forums that uses .rich-page-main and .rich-page-content, but these styles are not defined in the docs (unless I've been looking in the wrong place).


      Can someone describe the best practice or the correct css style to use that will allow me to stretch my content vertically?  Thank you.


      - Joe

        • 1. Re: how to set rich:page to 100% height and width
          Ilya Shaikovsky Master

          That question is not about particular components but very popular question about height = 100% in general. E.g. If you specifying it to some div which defined as direct body child - it height will be fit's the body element. And not full screen as you expect. Body stretched in order content fit it. So it's size could not be set to be fullscreen using such definition.

          • 2. Re: how to set rich:page to 100% height and width
            Joe Greene Novice

            Hello Ilya - Thank you for the response.


            We currently manage our resizing and content "stretching" by running javascript resize functions when the page loads or is resized.  We do this the common way getting the viewport size, and other components on the page with a predefined height, then setting the content to the amount of vertical space left over.  I was hoping to eliminate having to do this with these new semantic layout components.


            I remember about 3 years ago when I was looking at a few different component libraries on my way to selecting Richfaces for our application.  I seem to remember that the Backbase library had a very simple way to stretch page content vertically to 100% by simply providing a couple of attributes.  Its been a while, and my memory may be rusty, but that's the impression I was left with.  I thought maybe there would be a "best practice" based on these RF page layout components that would provide the vertical "scaling" I need without having to write resizing javascript.  In fact, this is really the only reason right now I would consider modifying our pages - only if I could get the layout to scale to the full size of the viewport without the need for javascript resizing.


            I'm sorry if I missed the spirit of your response, but it sounds like you are saying that these layout components are not designed to easily accomplish what I want to do.


            - Joe