Search bar and 'items per page' are out of alignment with bootstrap 2
Search bar and 'items per page' are out of alignment with bootstrap 2
I have followed the instructions from the article, and have this in my coffeescript:
[code]$(document).ready ->
$("#ideatable").dataTable
sPaginationType: "bootstrap"
sDom: "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
sWrapper: "dataTables_wrapper form-inline"
$.extend $.fn.dataTableExt.oStdClasses,
sWrapper: "dataTables_wrapper form-inline"[/code]
Currently, the items per page is out of place, though the search bar is in the correct position. If i use the JS for a fixed width columns, rather than fluid, both the search box and items per page are out of place.
This is what it looks like
http://i.imgur.com/cDs9v.png
[code]$(document).ready ->
$("#ideatable").dataTable
sPaginationType: "bootstrap"
sDom: "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
sWrapper: "dataTables_wrapper form-inline"
$.extend $.fn.dataTableExt.oStdClasses,
sWrapper: "dataTables_wrapper form-inline"[/code]
Currently, the items per page is out of place, though the search bar is in the correct position. If i use the JS for a fixed width columns, rather than fluid, both the search box and items per page are out of place.
This is what it looks like
http://i.imgur.com/cDs9v.png
This discussion has been closed.
Replies
Allan
That's when I copy out the dodgy section.
I put up a live demo, ideatool.herokuapp.com, sign in with example@railstutorial.org as user and foobar as password
The table container has 840px width to work in, but the .span6 elements you have (one for the info element, one for the paging control) are 460px each. 920 > 840 so you get the float being bumped to the next row.
So either you need to change the span6 width, the container, or something with that same effect.
Allan
I followed the updates in this guide
http://www.datatables.net/forums/discussion/9435/minor-fixes-for-datatables-bootstrap/p1
and it looks a lot better now, other than the show x entries thing being a little too high.
Is this still due to having the width too large to fit? I tried mucking around with the span numbers and couldn't get anything that looked better.
thanks, chris
Also, how can I make it automatically sorted descending on the points column, and unsorted/no changes for other columns?
I read some guides on this site, however I couldn't manage to get it working properly and always seemed to have one column only able to sort ascending or I had applied it to the wrong column :/
My current js code is below.
$(document).ready ->
$("#ideatable").dataTable
sPaginationType: "bootstrap"
sDom: "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>"
sWrapper: "dataTables_wrapper form-inline"
Use aaSorting .
> and it looks a lot better now, other than the show x entries thing being a little too high.
Use Firebug or Inspector to inspect the elements and see where the height is coming from. You can then add CSS to alter that.
Allan