3 Replies Latest reply on Feb 16, 2010 5:12 PM by frederickvalone

    Resizing cflayout based on browser window

    frederickvalone Level 1

      How can I base the cflayout on the browser window's visible area? Every time I  resize the window my controls are being displayed off screen with no scroll bars  to get to them. Ideally I'd like the layout to be dynamic enough to resize  gracefully without needing the scroll bars. Thanks

        • 1. Re: Resizing cflayout based on browser window
          CFML_MANIAC

          The way I personally do this is to set the entire page into one large Table, with a width of 100%.

           

          If you are already using tables within your code, then you need to be sure you don't have any large width= values set.  Also, if your site has fancy graphics, you need to find somewhere on the page to allow some 'stretching' of those graphics.

           

          Here's a quick example of a page that will automatically adjust based on screen size (remember, just because they are viewing at 1280 x 1024 resolution doesn't automatically mean that their browser is maximized.. it could be reduced/resized on their screen to smaller dimensions - this code will fix that)

           

          <table border="0" cellspacing="0" cellpadding="4" width="100%">

          <tr><td bgcolor="black"><font color="white"><b>This could be a navigation area<Br>Just putting it here for demonstration</b></font></td>

          <td width="100%" bgcolor="silver"><font color="black"><b>This could be the main area, and since it has a width of 100% it will stretch horizontally based on how much actual screen space is available on the viewers browser window</b></font></td>

          <td align="right"><font color="navy">This is a right column, and since it is set to 'align=right' it will allow the center column to strech back and forth</font></td></tr></table>

           

          By experimenting with setting the width= attribute on different columns, you can get different results.  Just remember to set the main table width at 100%, and be sure t have at least one TD that has a width of 100% and you should be good to go

           

          WHeis

          • 2. Re: Resizing cflayout based on browser window
            Kevin D. Wright

            Frederick,

             

            In the outer cflayout (type=border) add fitToWindow="true".

            Hope this helps.

             

            -Kevin

            • 3. Re: Resizing cflayout based on browser window
              frederickvalone Level 1

              Thanks... I'll try that.