Using sDom to add a header bar is changing table styling.
Using sDom to add a header bar is changing table styling.
kbeaty
Posts: 12Questions: 0Answers: 0
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.
Home Page raceTracker.com
<!-- dataTables style sheets -->
<!-- jquery-ui-1.9.1.custom.css contains the custome styling for dataTables from JQueryUI -->
$(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('Select an event below');
} );
/* "sDom": '<"toolbar">frtip' */
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.
Home Page raceTracker.com
<!-- dataTables style sheets -->
<!-- jquery-ui-1.9.1.custom.css contains the custome styling for dataTables from JQueryUI -->
$(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('Select an event below');
} );
/* "sDom": '<"toolbar">frtip' */
Help or suggestions will be appreciated.
This discussion has been closed.
Replies
> '<"H"f<"toolbar"<"clear">>tr<"F"ip<"clear">>'
Or is it the commented out one you are having problems with? You need to be aware that the sDom default is different depending on if jQuery UI is enabled or not since jQuery UI theming needs extra markup.
Allan
> '<"H"f<"toolbar"<"clear">>tr<"F"ip<"clear">>'
There is a missing closing brace:
[code]
<
"H"
f
<
"toolbar"
<
"clear"
>
>
t
r
<
"F"
i
p
<
"clear"
>
>
[/code]
I'd guess its missing from the header?
Allan
[code]
dom: [
[
{ className: "H" },
'filter',
[
{ className: "toolbar" }
],
[
{ className: "clear" }
]
],
'table',
'processing',
[
{ className: "F" },
'info',
'paging',
[
{ className: "clear" }
]
]
]
[/code]
A lot more verbose, but possibly more understandable? An array indicated a tag ('div' by default and could be changed to some other tag if needed).
Allan
IMO, being a bit more verbose is OK as it adds to clarity. It took me a while and reading a few of the forum comments before I began to understand.