Can't resize columns when using drop down select

eddie2012

Hi,

Firstly, I love this JQuery library. Full of features and usually very straight-forward to use.

I have a problem with table width that I haven't encountered before and was hoping for some help.

Debugging code: ehocaz

For some reason, it ignores my CSS settings on table width.

The relevant CSS code:
[code]
/*
* Table1
*/

body {
width: 729px;
margin-top: 0px;
margin-left: 0px;
overflow: hidden;
}


table.dataTable {
margin: 0 auto;
clear: both;
font-family: arial;
font-size: 10px;
margin-top: 0px;
margin-left: 0px;

}
[/code]


I've tried setting it in aoColumns as well but so far, only the stuff in the footer takes into account my width setting of 729px.

I also tried using this code but it doesn't work.

[code]
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
[/code]

My code:
http://live.datatables.net/arusem/edit#javascript,html,live

allan

I'd suggest setting the width on the table node rather than on the document body tag.

This is that applied here: http://live.datatables.net/arusem/2/edit

More generally, I'd suggest you apply the width to the `.dataTables_wrapper` element (so the header and footer also has the width applied): http://live.datatables.net/arusem/3/edit

Allan

eddie2012

Thanks for your help.

Only issue is when I add the select boxes back in I can't resize anymore.

See updated code.

Is there a way I can make the columns smaller? It seems to have a minimum width built it?

Cheers.

allan

Version 6 appears to test the latest - is that the right one? http://live.datatables.net/arusem/6/edit#preview

I'm not sure sure what you mean by resize I'm afraid. Resize what exactly?

Allan

eddie2012

What I'm looking to do is have two versions of the table: a 729px version and a 640px version.

But for some reason the table locks in at a minimum width of about 950px.

I'm happy for the words to wrap so it can be smaller, or for there to be less space to the right of the column, but am not sure how to do this and keep my drop-down boxes.

Cheers,

Ed.

allan

I see - so the problem is that your `select` lists are defaulting to your OS / browser default which is likely to be that they will force their own width to be that of the longest string in its options. With you have the longest string from all of the columns and add them together, you get the table at the width you are seeing.

Adding `select { width: 100% }` should resolve this:
http://live.datatables.net/arusem/8/edit

(although it is possible there might be some quirks in different browsers - `select` elements are notoriously hard to style).

Allan

eddie2012

Thanks for this. Works beautifully now.