[1.7.5] sWidth never applies

pelican

hi,

i encounter problem with sWidth. I can't figure out why it does'nt work in my case.
I tried to define the column's size with aoColumns and aoColumnDefs but both with the same result.

Here's my code :
[code]
var oTable = $("#maGrille").dataTable({
"bAutoWidth": false,
"aoColumns":[
{"sWidth": "100px"},
{"sWidth": "100px"},
{"sWidth": "100px"},
{"sWidth": "100px"},
{"sWidth": "100px"},
{"sWidth": "100px"},
{"sWidth": "100px"},
{"sWidth": "100px"}
],
"sDom": '<"H"lfr>t<"F"ip>',
"aoColumnDefs": [
{ "sWidth": "50px", "aTargets": ["COLONNE"] }
],
"sPaginationType": "full_numbers",
"oLanguage": {"sSearch": "Filtre (toutes colonnes):" }
});
[/code]

My table is build in PHP.

if i write { "sTitle": "toto", "aTargets": ["COLONNE"] }, the title COLONNE becomes toto. That's why i think the problem is just with sWidth.

Could you help me ?

Sorry for my bad english,

Benoit.

P.S. i discovered dataTables two days ago and i found it awesome !

allan

The width can be difficult with the table. Firstly you might have a style on the table like "table { width: 100% }" which would mean that the table _must_ take 100% width, regardless of what you set sWidth to. If you have a look with Firebug you should see that the columns have been set to 100px width, but there will be some overriding factor causing them to be something else.

Allan

pelican

Thank you for your response.
I'll give it a try to have a look with firebug.
I will see what I can do. I will post my solution here if I find something interesting.
But it can take me a long time to enter in your code.

It's a shame that sWidth does'nt work as expected (or it does but something override the job). In my case datatable is unusable just because of this issue.
I hope I can find a solution.
It seems other users have same issue.
But css, what can override the style ?

It's just a beginnig, the struggle goes on !

regards

allan

If you can give us a link to your page I might be able to suggest something. sWidth is useful, but there are other things which override it, and it would be bad if they couldn't do that (i.e. setting the table width, or content overrun).

Btw - your table adds up to 800px (unless you have certain columns matching your aoColumnsDef), does the table width intended match that?

Allan

pelican

Sorry, in the present time I don't have a public server.

Two columns of my table are a list of parameters.
For example "SD_016/SD_016_M/SD_016_M1/SD_016_M2/SD_016_M3/SD_016_M4/SD_042_cumul_t1/SD_042_cumul_t/SD_042_gain_t/SD_042_perdu_t/SD_041_cumul_t1/SD_041_cumul_t/SD_041_gain_t".
You can see the width of my table can grow fast.
But my parameter can be just "SD_016/SD_016_M".
So when i use filter, column's width can change a lot and it's a little disturbing.

The best would be :
- table width = 800px (or the size of my screen)
- columns which diplay list have a max size and write on several lines if needed.

I use jEditable with dataTable, it works as expected and I enjoy it !
I have in mind to write a script to "dataTable" any tables of my database.
So I can encounter the issue (and others) again.

Never mind if I don't manage to do it. I think I will learn a lot with trying to understand your code.
I hope my english isn't too hard to understand !

Benoit.

pelican

Hi Allan,
you're rigth. Columns have been set to 100px. But I have too long words without space. In this case, the column size hasn't right of way.

I manage to have something better.
I added :
- a style to my table : style="{width:800px ; table-layout: fixed}"
- "overflow: hidden;" to "table.display td" class to hide the overflowing content.
- "width: 60px;" to the class search_init (just to be sure)
These modifications allow to have the choosen size even if I have a long word whithout space in a td.
It was my first solution.
It looks better but sometimes we don't see all the data (when overflow: hidden is used).

So I updated a little jEditable to show just the beginning of the too long words concatenate with 3 dots. When the user clicks, he can see all the data in a textarea but it doesn't modify the column size.
To do the same, you can follow what is done for the option placeholder in the jEditable code.

I hope it makes sense.

Benoit.