Excessive bottom padding between Datatable and next element
Excessive bottom padding between Datatable and next element
PaoloValladolid
Posts: 35Questions: 0Answers: 0
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 -->
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 -->
This discussion has been closed.
Replies
[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.
If this doesn't help, can you post a link to a live example showing the issue please?
Regards,
Allan
Thank you!!!