jquery-ui-tabs and the tables associated with tabs do not size to the width of the screen
jquery-ui-tabs and the tables associated with tabs do not size to the width of the screen
I am trying to use this jquery-ui-tabs in which I have a tab for each month, and the tables have columns equal to the number of days in the month. However, the months that have 30 or 31 days stretch past the box that the tabs use and off the screen. How do I get the tables and their columns to adjust size to fit within the tabs div? Normally, I would put a table around both to get them to size together, but if I do this, the jquery-ui-tabs stuff stops working all together and fills the screen with 12 tables and shows the months as the bullet list items.
This discussion has been closed.
Replies
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Netbackup Report
@import "/media/css/demo_page.css";
@import "/media/css/demo_table.css";
@import "/TableTools/media/css/TableTools.css";
@import "/css/jquery-ui/css/redmond/jquery-ui-1.8.4.custom.css";
.ui-tabs .ui-tabs-panel { padding: 10px; font-size: 12px; }
a { font-family: Arial,Verdana,sans-serif;font-size: 12px; color: #483D8B;text-decoration: none; }
a:hover { font-family: Arial,Verdana,sans-serif;font-size: 12px;color: #A52A2A;background-color: #FAEBD7; }
h1 { font-family: Arial, Verdana, sans-serif; font-size: 32px; color: #A52A2A; }
h2 { font-family: Arial, Verdana, sans-serif; font-size: 24px; color: #A52A2A; }
th, td { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: black; padding: 0; }
caption { font-family: Arial, Verdana, sans-serif; font-size: 16px; color: #blue; }
body { margin: 0; padding: 0; font-family: Comic Sans MS,cursive, san-serif; font-size: 18px; color: black; }
$(document).ready(function() {
$("#tabs").tabs({
"show": function(event, ui) {
var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
if ( oTable.length > 0 ) {
oTable.fnAdjustColumnSizing();
}
}
});
$('table.display').dataTable({
"bJQueryUI": true,
"bStateSave": true,
"sScrollY": 800,
"bPaginate": false,
"sDom": '<"clear">lfrtip'
});
});
January
February
March
April
May
June
July
August
September
October
November
December
Server
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Note: Each table header after is similar but has each to the number of days in the month
[/code]