FixedColumns not working with Bootstrap.css
FixedColumns not working with Bootstrap.css
ttback
Posts: 19Questions: 0Answers: 0
I'm not sure if I should post it here or if there's another place for FixedColumns plugin but this particular example does not work with Bootstrap 2.0's css
http://datatables.net/release-datatables/extras/FixedColumns/
It doesn't work in both Chrome and IE for me. In Chrome the Columns will go all the way the right while in IE I see no xScroll at all.
It might be something related to column width that's set by bootstrap. Have you tried it?
http://datatables.net/release-datatables/extras/FixedColumns/
It doesn't work in both Chrome and IE for me. In Chrome the Columns will go all the way the right while in IE I see no xScroll at all.
It might be something related to column width that's set by bootstrap. Have you tried it?
This discussion has been closed.
Replies
"sScrollX": "10%",
"sScrollXInner": "150%",
"bScrollCollapse": true
[quote]warning (table id = 'example'): The table cannot fit into the current element which will cause column misalignment. Increase the sScrollXInner value or remove it to allow automatic calculation
[/quote]
I checked following doc on FixedHeader(not FixedColumn), http://datatables.net/forums/discussion/10275/fixedheader-column-widths-dont-match-cloned-header-from-table/p1
and tried to set a super large width on one column and see what happens, it seems like something is wrapping the table so that the columns would never get out of the width of table no matter what you set. I haven't been able to track down that css property in bootstrap.css yet.
Also, which bootstrap integration files are you using for DataTables? The most recent are here ( https://github.com/DataTables/Plugins/tree/master/integration/bootstrap - feel free to fork!). I'll be updating the blog post to point at them soon...
Allan
http://datatables.net/blog/Twitter_Bootstrap_2
I'll try the new css and js on your bootstrap and see what happens.
There is not much custom code on my tryout, basically the exact same code you have on examples for FixedColumn, an ajax load through a text file you had on your ajax call example etc. The only diff is probably at bootstrap integration somewhere, I'll try it now.
[code]var oTable=$('#example').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"sAjaxSource": 'datatables/ajax/arrays.txt',
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true
} );
new FixedColumns( oTable);[/code]
[code]
<!DOCTYPE html>
$(document).ready(function(){
//Initalize data grid
var oTable=$('#example').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"sAjaxSource": 'datatables/ajax/arrays.txt',
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true
} );
new FixedColumns( oTable);
});
Column1
Column2
Column3
Column4
[/code]
Apologies for the briefness of this reply, but I need to fly out the door very shortly!
So there are two things going on here, 1 not related to Bootstrap, while the other is.
1. The main one that is breaking FixedColumns is the fact that you are loading data through Ajax. This isn't a problem as such, with current versions of FixedColumns you do need to use fnInitComplete to get that to work.
I've just committed a change to FixedColumns 2.5.0.dev which you can pickup from the downloads page ( http://datatables.net/download ) that removes that required (FixedColumns will deal with it automatically for you).
2. The bootstrap integration for DataTables wasn't really up to scratch for when scrolling was enabled in DataTables, nor when FixedColumns were used. I've just added support for both of them to the Bootstrap integration files in the GitHub repo I linked to before - so you'll want to pick up the latest files from there.
This is an example of it in action:
http://live.datatables.net/ovesuy/edit#javascript,html
Regards,
Allan
Allan
Great work. Thanks for such fast support response. I have to wrap up my spike on Monday so this is great help. Advanced filtering and Column freeze are two features on top of the list for this release so it's really important to have this one working.
I couldn't imagine myself figuring out the first one since without Bootstrap it worked somehow. Did you have to use the Datatables debugger to find out?
I'll check out your new dev versions and get things together.
No, it was an issue I already knew about - see:
http://datatables.net/release-datatables/extras/FixedColumns/server-side-processing.html
I'm not sure why I never thought of mitigating that issue in FixedColumns, rather than requiring the developer to use fnInitComplete, until I was thinking about your post - but I guess that's the way software development goes sometimes. Hooray for open source and people such as yourself contributing back to the project - thanks!
Allan
I saw your changes on datatables.bootstrap.css and the fixed column build, so I'm using them below in my new code.
I tried to pull them together, and it seems to trigger your changes (the scroll bar on the entire table) but it's definitely not fixing the columns (only one scrollbar rendered). If i scroll it to the right, the columns not fixed(on the right) will just slide into the fixed one from behind. It appears like they are overlapped on the screen.
Can you try to replicate it on your end?
[code]
<!DOCTYPE html>
$(document).ready(function(){
//Initalize data grid
var oTable=$('#example').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"sAjaxSource": 'datatables/ajax/arrays.txt',
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true
} );
new FixedColumns( oTable);
});
Col1
Col2
Col3
Col4
[/code]
I changed the 'raw' github includes to reading it from the pages - GitHub 'raw' shouldn't be used as a CDN as it is really not optimal for that.
Allan
The demo seems to only in Chrome now. But even in Chrome, some column separators just don't match. IE and Firefox don't show scrollbar and if you change width of window, it will end up in a mess.
Oddly enough, I think it might have been - but I am surprised. I'm not 100% sure what the problem was, but I changed them and it worked - so we'll go with that.
Could you try the bootstrap integration with the release version of FixedColumns and see if that works better for you? The 2.5.0 nightly is stillv try alpha quality - with a few resizing issues unfortunately.
Allan
Can you think of a reason why the horizontal scrolling wouldn't work in Firefox? I'm looking at
http://live.datatables.net/ovesuy/edit#javascript,html and
http://live.datatables.net/esoher/edit#preview
in Firefox 13.01 and 14.01 on a Mac, Firefox 12.0 and 14.01 and IE9 on a PC neither of those examples scroll left and right like they do in Chrome. All of the columns look as if they were rendered to fit in the table.
Thanks,
Jason
Thanks for pointing this out.
Allan
Jason
Pull request at https://github.com/DataTables/Plugins/pull/3
One line fixes are my favorite :)
Thanks,
Jason
It looks like it was this in Bootstrap that was causing the problem:
[code]
table {
max-width: 100%;
[/code]
Thanks very much for finding that and the pull request. Merged in now and the 'live' examples above work in Firefox :-)
Regards,
Allan
Jason
http://live.datatables.net/umuwij/2/edit#javascript,html
Also something I added to my bootstrap integration css file. (warning SASS below)
[code]
div
&.DTFC_LeftHeadWrapper table, &.DTFC_RightHeadWrapper table
margin-bottom: 0 !important
border-top-right-radius: 0 !important
border-bottom-left-radius: 0 !important
border-bottom-right-radius: 0 !important
thead tr:last-child
th:first-child, td:first-child
border-bottom-left-radius: 0 !important
border-bottom-right-radius: 0 !important
&.DTFC_LeftBodyWrapper, &.DTFC_RightBodyWrapper
table
border-top: none
margin-bottom: 0 !important
tbody tr:first-child
th, td
border-top: none
&.DTFC_LeftFootWrapper table, &.DTFC_RightFootWrapper table
border-top: none
[/code]
Pretty much just needed to add in the Right side overrides for fixed columns as well.
Allan
weird that it shows 0 tables in the debugger
anyhow I wanted to get the fixed 1st column working with a bootstrap table
[code]
$(document).ready(function()
{
$('.dropdown-toggle').dropdown();
$(".alert").alert();
var oTable = $('#vergleich').dataTable( {
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>"
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": false,
"bFilter": false,
"bInfo": false,
"bPaginate": false,
"bLengthChange": false,
} );
new FixedColumns( oTable );
})
[/code]
the table is wrapped in
[code]
[/code]
The table is a standard table
[code]
...
...
cloned thead
[/code]
please advise
[code]
new FixedColumns( oTable, {
"iLeftColumns": 0,
"iRightColumns": 1
} );
[/code]
Digging a little further I found that DT_bootstrap.css are missing styling for div.DTFC_RightHeadWrapper, adding that in the css solves it.
[code]
/*
* FixedColumns styles
*/
div.DTFC_LeftHeadWrapper table,
div.DTFC_LeftFootWrapper table,
div.DTFC_RightHeadWrapper table,
div.DTFC_RightFootWrapper table,
table.DTFC_Cloned tr.even {
background-color: white;
}
div.DTFC_RightHeadWrapper table ,
div.DTFC_LeftHeadWrapper table {
margin-bottom: 0 !important;
border-top-right-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
div.DTFC_RightBodyWrapper table,
div.DTFC_LeftBodyWrapper table {
border-top: none;
margin-bottom: 0 !important;
}
div.DTFC_RightBodyWrapper tbody tr:first-child th,
div.DTFC_RightBodyWrapper tbody tr:first-child td,
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
border-top: none;
}
div.DTFC_RightFootWrapper table,
div.DTFC_LeftFootWrapper table {
border-top: none;
}
[/code]
Allan