DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

ThemeRoller Layout Not Working

ThemeRoller Layout Not Working

jcrawfordjcrawford Posts: 172Questions: 0Answers: 0
edited September 2011 in DataTables 1.8
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]

Replies

  • jcrawfordjcrawford Posts: 172Questions: 0Answers: 0
    Also notice all of my sorting icons in the headers are pushed down to a second line, does this no matter which ThemeRoller Theme I have in use.
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    ThemeRoller doesn't include all of the styles needed by DataTables (since DataTables isn't part of the jQuery UI project). You need to include some additional styles, or craft your own. My default ones are included in the distribution in /media/css/demo_table_jui.css - include that file that thinks should look a lot better.

    Allan
  • jcrawfordjcrawford Posts: 172Questions: 0Answers: 0
    thanks much for your feedback, I will try to get that integrated now.
  • jcrawfordjcrawford Posts: 172Questions: 0Answers: 0
    I integrated the CSS as you stated but my search bar still falls below the word Search and is not left aligned :( Guessing I will have to tweak the CSS to position it properly?
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Quite possibly. Tinkering around with Firebug might give a clue as to what is going on - also this blog post might be of interest: http://datatables.net/blog/Creating_beautiful_and_functional_tables_with_DataTables

    Allan
  • GregPGregP Posts: 487Questions: 8Answers: 0
    You may need to set an sDom in your initialization that uses the jQuery-UI-specific strings ('H' and 'F' for Header and Footer respectively) as well. The default sDom does not work with jQuery UI and I'm not sure that merely setting bJQueryUI to true is enough.
  • NathanielUnderwoodNathanielUnderwood Posts: 7Questions: 0Answers: 0
    Hi there,

    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.
  • GregPGregP Posts: 487Questions: 8Answers: 0
    edited September 2011
    The two issues are related. But it's extremely difficult to troubleshoot CSS without a live example. The JavaScript might be doing everything it says its doing (adding "leftColumn" and "css_right" etc.), but these classes could be in conflict of have lower specificity than other CSS that you have on the page.

    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
  • NathanielUnderwoodNathanielUnderwood Posts: 7Questions: 0Answers: 0
    Thanks for the quick response, you are totally right in your apreciations, so i will change the jQuery UI css to reflect the changes in sorting icons, but the "second line" issue appeared before make any modification to css or add any custom class.

    I will try to put an online working example of the datatable.

    Again, thank you.
  • GregPGregP Posts: 487Questions: 8Answers: 0
    edited September 2011
    No problem! I've seen the "second line" issue appear before, too. It's almost always a conflict with other CSS or in some cases simply some missing CSS.

    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.
  • NathanielUnderwoodNathanielUnderwood Posts: 7Questions: 0Answers: 0
    My quick and dirty solution for the "second line" issue add the following

    [code]
    .DataTables_sort_icon {
    float: left;
    }
    [/code]

    to the css, maybe is not the clean and most correct solution, but it works ;)

    Diego.
  • GregPGregP Posts: 487Questions: 8Answers: 0
    On the contrary, I think (assuming you want it on the left) you are doing it exactly the right way now!
  • jbiemansjbiemans Posts: 9Questions: 0Answers: 0
    edited August 2012
    I know this is old but once I added this line:



    If fixed the formatting problems for me.
  • kbeatykbeaty Posts: 12Questions: 0Answers: 0
    I'm having similar problems. When looking at the code for the example themeroller lay out in the examples, there is this file being loaded - @import "/media/css/site_jui.ccss"; - which I don't recall ever seeing.
    Is it required for a jqueryUI theme? If so, where is it found?
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    > 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
  • kbeatykbeaty Posts: 12Questions: 0Answers: 0
    Thank you for the input. I solved the problems after seeing a post stating that the site_jui.ccss was specific to the datatables.net site and that it is not included in the downloaded example files.
  • akreddyakreddy Posts: 1Questions: 0Answers: 0
    I had the same issue. The search(filter) input box was too big. The toolbar add delete button were wrapping and were below the info result length drop down. I am using Visual Studio 2012 MVC4 default template and the base Site.css was messing up these styles. If you have the same issue, check what is the final CSS style that is applied to the input box and the label control in the header div tag Id "[ur table id]_wrapper". I changed the base Site.css to remove the default style for "input". Next I added the following to fix the buttons wrapping to a new line:
    .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.
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.