Filter Search Bar Too Long

sampham

Hi,

I'm using a datatable with the filter, but the styling for the filter creates the width for the search bar to be longer than the datatable itself. The search bar seems to be created to match the width of the window rather than the width of the columns within the table. So when the table is smaller than width of the window the element with the search bar hangs out over pass the end of the table. This also happens with the footer for the table that says 'showing 1 to n of n entries'. The table is just on a local host so I can't provide a link to it, but this is basically what my code looks like:

[code]




Group1
Group2


header1
header2
header3




@{
foreach (var x in Model)
{


cell1


cell2


cell3


}
}





$('#myTable').dataTable({
"aaSorting": [],
"bSort": true,
"bPaginate": false,
"bJQueryUI": true
});

[/code]

How can I fix this problem?
Also, on a less important note, the row that has the colspan with the 'group1' and 'group2' aren't getting the css from the JQueryUI. Do you know why this is happening?

allan

Tis is happening because of how CSS 2.1 layout works. There is a DIV container which doesn't have a width value (the dataTable_wrapper element) therefore that takes up 100% of the width available to it by default. The toolbar header is 100% of that, so what I would typically say is add width:100% to your table as well, and if you want it to be smaller, make the container smaller with CSS.

Allan

sampham

Alright, I'll try that. Thank you for your help!