Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / [xTable] fill browser window

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

#1 November 4, 2010 9:34:46 am

luv2hike
New Member
Registered: November 4, 2010
Posts: 2

[xTable] fill browser window

How can I make an xtable fill the browser window both horizontally & vertically and make it resize itself when the user resizes the browser?  I tried using height:100% for the overall container but then I get just a thin line for the table.  The width seems to already do this in the examples.  Thanks!

Offline

 

#2 November 4, 2010 10:19:38 am

luv2hike
New Member
Registered: November 4, 2010
Posts: 2

Re: [xTable] fill browser window

I may have figured something out, though it did require a hard-coded customization in the xtable.js file, which is probably not the best general solution to be sure.  In the resize handler for xtable, I just force the overall container's height to be the client height minus a little padding for the scrollbar.  Please let me know if there is a cleaner or more generic way.  Here is the resulting new function from my specialized xtable.js:

  function resize()
  {
    var sum = 0, cch = 0, w, h;
    // caption container
    if (cc) {
      cch = xHeight(cc);
      xMoveTo(cc, 0, 0);
      xWidth(cc, xWidth(root));
    }
    // set to full height of the browser
    xHeight(root, xClientHeight()-30);
    // frozen row
    xMoveTo(fr, fcw, cch);
    xResizeTo(fr, xWidth(root) - fcw, frh);
    xMoveTo(fri, 0, 0);
    xResizeTo(fri, xWidth(ot), frh);
    // frozen col
    xMoveTo(fc, 0, cch + frh);
    xResizeTo(fc, fcw, xHeight(root) - cch);
    xMoveTo(fci, 0, 0);
    xResizeTo(fci, fcw, xHeight(ot));
    // table container
    xMoveTo(tc, fcw, cch + frh);
    xWidth(tc, xWidth(root) - fcw - 1);
    xHeight(tc, xHeight(root) - cch - frh - 1);
    // size and position fr cells
    a = ot.rows[0].cells;
    e = xFirstChild(fri, 'div');
    for (i = 0; i < a.length; ++i) {
      xMoveTo(e, sum, 0);
      w = xWidth(e, xWidth(a[i]));
      h = xHeight(e, frh);
      sum += w;
      xResizeTo(xFirstChild(e, 'table'), w, h);//////////
      e = xNextSib(e, 'div');
    }
    // size and position fc cells
    sum = 0;
    a = ot.rows;
    e = xFirstChild(fci, 'div');
    for (i = 0; i < a.length; ++i) {
      xMoveTo(e, 0, sum);
      w = xWidth(e, fcw);
      h = xHeight(e, xHeight(a[i]));
      sum += h;
      xResizeTo(xFirstChild(e, 'table'), w, h);//////////
      e = xNextSib(e, 'div');
    }
    onScroll();
  } // end resize

Offline

 

#3 November 4, 2010 1:08:57 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTable] fill browser window

Hi luv2hike, Welcome to the forums!

I'll take a look at this some time today - or this evening at the latest.

Thanks!

Offline

 

#4 November 4, 2010 1:42:48 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTable] fill browser window

I had an idea and went ahead and put together a quick demo for it. Take a look: xTable Demo 2. The trick was to give body 100% height as well as the xtRoot class (actually I set that at 99.6%). Of course there's nothing wrong with your code modification, but give this CSS technique a try and see what you think.

Offline

 

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load