First, I'm new at this so please excuse anything that is outrageously dumb.
When I use the sDom parameter in my table, the text added to the header bar and all the text in each cell (TD) is changed to white. Removing the SDom lines allows the table to revert back to the styling in my custome jqueryUI. Does anyone have any idea how to solve this. I have looked at the css styling in all the css files and can not find any conflicts. Any idea what I'm missing?
We are using the Lift web framework and the table is displayed inside a Lift surround statement.
Line 256 - ".ui-widget-header a { color: #ffffff; }" in jquery-ui-1.9.1.custom.css - is being activated to set the color, but I can not figure out why this css would be called simply because of the sDom parameter.
Note: we have other tables in this app that do not employ the sDom parameter and they are fine.
This is my code.
<lift:surround with="default" at="content">
<head>
<title>Home Page raceTracker.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- dataTables style sheets -->
<!-- jquery-ui-1.9.1.custom.css contains the custome styling for dataTables from JQueryUI -->
<link href="css/demo_table.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/jquery.dataTables_themeroller.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.9.1.custom.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate" : false,
"bJQueryUI": true,
"sScrollY": "370px",
"bScrollCollapse" : true,
"bAutoWidth": false,
"sDom": '<"H"f<"toolbar"<"clear">>tr<"F"ip<"clear">>'
} );
$("div.toolbar").html('<h3>Select an event below</h3>');
} );
/* "sDom": '<"toolbar">frtip' */
</script>
</head>
Help or suggestions will be appreciated.
When I use the sDom parameter in my table, the text added to the header bar and all the text in each cell (TD) is changed to white. Removing the SDom lines allows the table to revert back to the styling in my custome jqueryUI. Does anyone have any idea how to solve this. I have looked at the css styling in all the css files and can not find any conflicts. Any idea what I'm missing?
We are using the Lift web framework and the table is displayed inside a Lift surround statement.
Line 256 - ".ui-widget-header a { color: #ffffff; }" in jquery-ui-1.9.1.custom.css - is being activated to set the color, but I can not figure out why this css would be called simply because of the sDom parameter.
Note: we have other tables in this app that do not employ the sDom parameter and they are fine.
This is my code.
<lift:surround with="default" at="content">
<head>
<title>Home Page raceTracker.com</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- dataTables style sheets -->
<!-- jquery-ui-1.9.1.custom.css contains the custome styling for dataTables from JQueryUI -->
<link href="css/demo_table.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/jquery.dataTables_themeroller.css" media="screen" rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.9.1.custom.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate" : false,
"bJQueryUI": true,
"sScrollY": "370px",
"bScrollCollapse" : true,
"bAutoWidth": false,
"sDom": '<"H"f<"toolbar"<"clear">>tr<"F"ip<"clear">>'
} );
$("div.toolbar").html('<h3>Select an event below</h3>');
} );
/* "sDom": '<"toolbar">frtip' */
</script>
</head>
Help or suggestions will be appreciated.