Home/ Questions/Q 4082212
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T18:09:35+00:00

I have a link to a potentially large table of data: <a class=tabledata href=table.php>View

  • 0

I have a link to a potentially large table of data:

<a class="tabledata" href="table.php">View data</a>

In the head of the page I load jQuery and FancyBox and then use the following to pull just the table fragment from the dummy HTML page:

$("a.tabledata").fancybox({
    'type': 'ajax',
    'ajax': { 
        dataFilter: function(data){
            return $(data).find('table');
        }
     }
});

In table.php I have a large table of data. Below is the unstyled dummy I’ve been using to try and debug this issue:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Dummy table</title>
</head>
<body>
  <div id="transactions" class="panel">
    <h4>Transactions</h4>
    <table class="data_list">
      <tr>
        <th>ID</th><th>Row class</th><th>Hash</th>
      </tr>
<?php
$c = 0;
while ( $c < 100 ) : ?>
      <tr class="<?php echo ( $c++ % 2 == 1 ) ? 'odd' : 'even'; ?>">
        <td><?php echo $c; ?></td>
        <td><?php echo ( $c % 2 == 1 ) ? 'odd' : 'even'; ?></td>
        <td><?php echo md5( $c ); ?></td>
      </tr>
<?php endwhile; ?>
    </table>
  </div>
</body>
</html>

Small tables are displayed perfectly.

If I load the large table as a FancyBox iFrame, it’s positioned correctly within the browser window, and there is a scrollbar on the right.

If I load the large table through FancyBox AJAX (which I need to do in order to isolate the required page fragment), the FancyBox modal extends way beyond the bottom of the browser window — even beyond the background overlay.

How can I force AJAX FancyBox modals to size themselves correctly?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can force the size of the fancybox:

    $.fancybox(
    '<p>BOX CONTENT</p>',
    {
        'autoDimensions'    : false,
        'width'             : 800,
        'height'            : 600,
        'scrolling'        : 'yes' //or auto depending on preference
    }
);

    I assume that forcing the size to “smaller” than the content will activate a scroll method. Check the Fancybox Docs on this issue.

    Given your example:

    $("a.tabledata").fancybox({
    'type': 'ajax',
    'ajax': { 
                dataFilter: function(data){
                    return $(data).find('table');
                }
            },
    'width':800,
    'height':600,
    'autoDimensions':false,
    'scrolling':'yes' //or auto depending on preference
});

    autoDimensions defaults to true and resizes the modal box to fit the content, if the content is massive and goes off the page, the modal box will fit it and thus go off the page. Setting the height and width of the box and then disabling autoDimensions will allow the sizing to work.

    Update:

    I’ve just had another idea. If you wrap the table in the html with a div and style the div to specific dimensions with overflow:auto then call the div into the ajax instead of the table, it should work.

    There are many examples here: http://fancybox.net/blog

    • 0