Excessive bottom padding between Datatable and next element

Excessive bottom padding between Datatable and next element

PaoloValladolidPaoloValladolid Posts: 35Questions: 0Answers: 0
edited June 2010 in Bug reports
I previously reported this as an Internet Explorer only issue but it also shows in Firefox. No matter what I do, there are an excessive number of blank lines between the Datatable and the button below the table.
Here is the HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Application: IDS -->
<!-- Page: SearchProduct -->
<!-- Generated: Fri Apr 30 17:15:02 EDT 2010 -->


<!-- Datatable styles and Javascript -->

@import "css/demo_page.css";
@import "css/demo_table.css";
@import "demo_support/themes/smoothness/jquery-ui-1.7.2.custom.css";






var ingredientTable;

$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
$("#ingredientsTable tbody").click(function(event) {
$(ingredientTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});

ingredientTable =
$('#ingredientsTable').dataTable( {
"bJQueryUI": true,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bFilter": false
} );
} );

var txWindow = null;

function fnIngredient_popup()
{
if (txWindow != null)
{
if (!txWindow.closed)
{
txWindow.close();
}
txWindow = null;
}

if (!txWindow || txWindow.closed)
{
txWindow = window.open("6-21 - Ingredient Lookup.html","txWindow",'width=840,height=400,toolbar=no,status=no,scrollbars=yes,location=no,menubar=yes,directories=no,screenX=60,screenY=60,left=60,top=60');
}
txWindow.document.location="6-21 - Ingredient Lookup.html";
txWindow.focus();
}

function refreshPage() {
window.location.reload();
}






<!-- BEGIN CONTENT AREA -->







PC Code
Ingredient Name
Product Manager




1234
Onions
Julia Child


1235
Garlic
Jane Eyre













<!-- END CONTENT AREA -->

<!-- BEGIN AREA FOOTER - ADD text/links for area footer within this paragraph tag -->

<!-- END AREA FOOTER -->

<!-- END CONTENT -->

Replies

  • abab Posts: 5Questions: 0Answers: 0
    edited June 2010
    I had a similar issue that I resolved by modifying the dataTable.css file:
    [code].dataTables_wrapper {
    position: relative;
    min-height: 302px;
    _height: 302px;
    clear: both;
    }[/code]
    If you get rid of the min-height value (or overwrite it in another css file), it will eliminate the additional whitespace. My only concern is that it might cause unexpected behavior somewhere that I haven't found yet. If anyone else has feedback on this issue, it would be quite appreciated.
  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    As ab says, DataTables' demo CSS has a min-height for the wrapper div, which is intended to stop the table size 'jumping around' when your are filtering for content. Removing this will do no harm at all - it will just cause a slightly different visual effect.

    If this doesn't help, can you post a link to a live example showing the issue please?

    Regards,
    Allan
  • PaoloValladolidPaoloValladolid Posts: 35Questions: 0Answers: 0
    Modifying the datatables_wrapper style fixed the issue for me. No more extra blank lines!

    Thank you!!!
This discussion has been closed.