ThemeRoller Layout Not Working
ThemeRoller Layout Not Working
jcrawford
Posts: 172Questions: 0Answers: 0
Hello,
I have tried using your very basic example of using ThemeRoller for themeing however I cannot seem to get everything to work. I have tried disabling my layout and outputting solely the table and still get the same result. The search box is not lined up and the pagination buttons are messed up. I have tried several different ThemeRoller themes including the one you show on your examples page:
http://datatables.net/release-datatables/examples/basic_init/themes.html
Here is a screen shot of my table and the source code is below also:
http://www.josephcrawford.com/pics/dt-themed.png
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
Administration Area
<!-- EVEN TRIED REMOVING THIS THINKING IT WAS CONFLICTING, IT WAS NOT AN ISSUE -->
$(document).ready( function() {
$('#resourcelog').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "/admin/resourceajax/?resource=bucks"
} );
} );
$(function() {
$( "#btnBar" ).buttonset();
$("#btnBar [name='radio']").change(function() {
var val = $(this).attr('id');
window.location = '?resource='+val;
})
});
All
Bike Bucks
Coins
Health
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Loading data from server
[/code]
I have tried using your very basic example of using ThemeRoller for themeing however I cannot seem to get everything to work. I have tried disabling my layout and outputting solely the table and still get the same result. The search box is not lined up and the pagination buttons are messed up. I have tried several different ThemeRoller themes including the one you show on your examples page:
http://datatables.net/release-datatables/examples/basic_init/themes.html
Here is a screen shot of my table and the source code is below also:
http://www.josephcrawford.com/pics/dt-themed.png
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
Administration Area
<!-- EVEN TRIED REMOVING THIS THINKING IT WAS CONFLICTING, IT WAS NOT AN ISSUE -->
$(document).ready( function() {
$('#resourcelog').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "/admin/resourceajax/?resource=bucks"
} );
} );
$(function() {
$( "#btnBar" ).buttonset();
$("#btnBar [name='radio']").change(function() {
var val = $(this).attr('id');
window.location = '?resource='+val;
})
});
All
Bike Bucks
Coins
Health
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
Loading data from server
[/code]
This discussion has been closed.
Replies
Allan
Allan
i'm having the same issue with sorting icons, always appear in a second line, besides this, i'm unable to change sorting icon classes, i'm setting sSortJUIAsc, sSortJUIDesc and sSortJUI to may own custom classes with the icons I want, but there is no change in code when i dig in it using firebug, my code looks as follow:
[code]
$(document).ready(function(){
$('#test_table').dataTable({
iDisplayLenght: 50,
bServerSide: false,
bJQueryUI: true,
bStateSave: true,
sPaginationType: "full_numbers",
sScrollY: "200px",
sAjaxSource: "/index/index",
sDom: '<"H"Tl>tS<"F"ip>',
sSortJUIAsc: "css_right sortAsc",
sSortJUIDesc: "css_right sortdesc",
sSortJUI: "css_right sortNoSort",
aoColumns: [
{ sName: "id", bVisible: false, bSortable: false },
{ sName: "type_id", bVisible: false, bSortable: false },
{ sName: "status_id", bVisible: false, bSortable: false },
{ sName: "province_id", bVisible: false, bSortable: false },
{ sName: "type_icon", bVisible: true, bSortable: false },
{ sName: "status_icon", bVisible: true, bSortable: false },
{ sName: "gender_icon", bVisible: true, bSortable: false },
{ sName: "name", bVisible: true, bSortable: true, sClass: "leftColumn" },
{ sName: "email", bVisible: true, bSortable: false },
{ sName: "birthdate", bVisible: true, bSortable: false, sClass: "centerColumn" },
{ sName: "province", bVisible: true, bSortable: false },
{ sName: "zipcode", bVisible: true, bSortable: false, sClass: "centerColumn" }
],
oTableTools: {
sSwfPath: "/swf/copy_cvs_xls_pdf.swf"
}
});
});
[/code]
i will apreciate any help with both issues, the second line in sorting and the sorting icons.
Thanks in advance.
Diego.
CSS issues like this really need a live example so that all inheritence is in place.
In general: if you are using jQuery UI, you shouldn't be trying to override it with your custom classes. That defeats the purpose of using jQuery UI. If you just like the nicely-rounded and shaded graphics from a ThemeRoller Theme, just strip those out by themselves. No point using jQuery UI in its entirety.
On the other side of that same coin: if you do in fact want to use most of jQuery UI but you want to swap out some custom graphics (sort icons, etc), it's best to modify the jQuery UI CSS to use your custom images rather than adding a whole new custom class.
Bottom line:
1) a live sample would be the way forward for us to give additional help
2) jQuery UI is meant to normalize/standardize UI. As soon as you hack it up, you're defeating its purpose
I will try to put an online working example of the datatable.
Again, thank you.
If I remember correctly, jQuery UI's classes do not perform the actual placement of the sort icons. I think I needed some of the CSS found in a demo page in order to get it into position. But you won't need to add new classes to take care of it, you will just style the classes that are provided by jQuery UI.
[code]
.DataTables_sort_icon {
float: left;
}
[/code]
to the css, maybe is not the clean and most correct solution, but it works ;)
Diego.
If fixed the formatting problems for me.
Is it required for a jqueryUI theme? If so, where is it found?
It is basically the standard DataTables site CSS which has been slightly modified for jQuery UI. You do not need this file - it is specifically for datatables.net .
What you will need is either the `media/css/jquery.dataTables_themeroller.css` or `media/css/demo_table_jui.css` files which are included in the DataTables download. The first one is the basic file, and I'd suggest you use that one, while the second one includes all of the additional CSS required for my various demos.
If you are still having issues when you include one of those files, please link us to your page and we'll take a look to see what can be done.
Regards,
Allan
.dataTables_length label
{
display: inline;
font-size: 1.2em;
font-weight: 600;
}
I highly recommend removing the Site.css as the base style sheet and use the Twitter bootstrapper css.