Table height issues; table navigation drawn on/outside table border

Table height issues; table navigation drawn on/outside table border

alexfrankealexfranke Posts: 2Questions: 0Answers: 0
edited January 2010 in General
I'm using DataTables by way of Tobias B

Replies

  • allanallan Posts: 63,695Questions: 1Answers: 10,500 Site admin
    edited January 2010
    Hi alexfranke,

    The problem is a css 'float' issue, I'd say. The two controls at the bottom of the DataTable (the info and the pagination control) are floated (left and right respectively) and there is nothing there to clear them. So you need an empty div with clear:both on it to fix the issue. Given your set up, I'd suggest using sDom ( http://datatables.net/usage/options#sDom ) with something like 'lfrtip<"clear">' and have div.clear { clear:both } in your css.

    As to why it "works" on the first and no the second - I suspect it doesn't actually work on the first - but it looks like it does because the image takes up enough of the display column to force an apparent line break. The 'clear' trick will make them both work properly.

    Hope this helps,
    Allan
  • alexfrankealexfranke Posts: 2Questions: 0Answers: 0
    Thanks, Allan.

    On the example table at http://datatables.net/index, using FireBug, it looks like example_paginate is supposed to appear /outside of/ example_wrapper -- it's moved to the outside of its container by the clears in info and pagination. I haven't tried the sDom (will try tonight) but it looks like adding



    after the info and pagination DIVs but before the close of the wrapper DIV will move them back inside the wrapper so that adding a border to the wrapper will enclose the whole thing.

    Thanks for your prompt and helpful response!
  • allanallan Posts: 63,695Questions: 1Answers: 10,500 Site admin
    Hi alexfranke,

    Looks like you've got it sorted now with a clear classed div :-). Looking sharp!

    Regards,
    Allan
This discussion has been closed.