Column width

huk

Hi, i have following code:
[code]
$('#optionsTable').dataTable( {
"aoColumns": [
{ "sWidth": "25%" },
{ "sWidth": "70%" },
{ "sWidth": "5%", "sClass": "center", "bSortable": false },
],
"aaSorting": [[0, 'asc']],
"bJQueryUI": true,
"bAutoWidth": false

},
"sPaginationType": "full_numbers"
} );
[/code]
Everything works fine except column width - they have auto width. What should i do to make fixed width?

allan

Hi huk,

Could you post a link to an example showing the problem please. I don't see any reason in your code why this wouldn't work, and I've just been using sWidth today myself, which was working well.

Regards,
Allan

willd

i am also having a very similiar problem:

my table is 6 columns but the autowidth seems to not be disabling
ie. it auto widths every column still and the width varies up when my data is inconsistent during paging

[code]
$('#contacts').dataTable({
// Custom column widths (not wokring!!?!)
"bAutoWidth" : false,
"aoColumns" : [
{ sWidth : "50px" },
{ sWidth : "50px" },
{ sWidth : "50px" },
{ sWidth : "50px" },
{ sWidth : "50px" },
{ sWidth : "50px" }
],
// "bProcessing": true, // Show processing delays
"bSaveState": true, // Save viewstate in cookie
"sPaginationType" : "full_numbers" // Full paging

});
[/code]

allan

Hi willd,

Can you post a link to an example showing the problem please? Also worth noting that if some of the data in a column is more than 50px, then it's going to cause the browser to resize the table, regardless of what you specify there - that's just how HTML tables work... You could add an overflow:hidden if you didn't want that to happen.

Regards,
Allan

lvalero

hello,

I have the same problem, here is an example :
http://www.polymtl.ca/gch/Outils/nouvelles_archives/nouvelles_archive.php

i wanted to size the first "id" column, but i was unable to do so, i also tried css, jquery.css() with livequery.

Regards.

allan

Your HTML has:
id

Which looks rather odd to me :-). Try:
id

Allan

lvalero

Yes,

with firebug one can be seen that a style is applied, but i searched my css and there is nowhere that that style could be found ! I am stuck.

in jquery.dataTables.js/function _fnDrawHead( oSettings ), i hard set the value and it works :

[code]
//nTh.style.width = oSettings.aoColumns[i].sWidth;
nTh.style.width = '12px';
[/code]


Regards.

lvalero

Haha ! My fault, i made an error when declaring may table object :

the oLanguage was not closed correctly by a "}"

[code]
var oTable = $('#example').dataTable( {
"oLanguage": {
"sProcessing": "Traitement en cours...",
"sLengthMenu": "Afficher _MENU_

PaoloValladolid

I am having trouble widening one of my columns. Here is the Javascript used to initialize the table:

[code]
function initStaticTable(tableId, detailCallback) {

$(document).ready(function() {
var tableQuery = "#" + tableId;
var tableBodyQuery = tableQuery + " tbody";
var tableRowsQuery = tableBodyQuery + " tr";

/* Add a click handler to the rows - this could be used as a callback */
$(tableBodyQuery).click(function(event) {
$(oTables[tableId].fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});

$(tableRowsQuery).bind('dblclick', function () {
var aData = oTables[tableId].fnGetData( this );
if (detailCallback) {
detailCallback(aData);
}
});

/* Init the table */

var tableOpts = {
"bJQueryUI": false,
"bAutoWidth": false,
"sPaginationType": "full_numbers"
};
oTables[tableId] = $(tableQuery).dataTable(tableOpts);
} );
}
[/code]

Here is sample markup - Product Name column always stays the same size. Table width setting has no effect:





Location
Report Status
Product Name    





Fairfax, VA

Stafford 221043

USA

New
Hart Flea Collar,
Zapout Bug Spray,
New Horizons Gentle Pest Controller Deluxe Plus

allan

@PaoloValladolid - I'm not sure I follow - you've got the width set at a fixed size - it's not going to change from that. Is that not what you want?

Allan

PaoloValladolid

Hi Allan,

The hardcoding of the column width in this line from the HTML that I posted was a desperate attempt to force the Product Name column to be wide:

Product Name

What happens in the browser is that the Product Name column is stays the same width. I could set style="width:4000px" and the width would still be the same. I am wondering if the Datatables code is forcing the width to be narrower than the style setting.

allan

Yes I think DataTables is incorrectly doing this! Could you try DataTables 1.7.1 when I release that in the next day or two please? I think I've addressed the situation there.

Allan

Trinesh

I am using jquery.dataTables.js * Version: 1.8.2.

I have 9 columns in my table.If the content is increased ,then alignment with the header and content alignment will be changed.I am not able to fix the column width. "bAutoWidth": false.. is not working.Can any one pls help me out.Thanks in advance.
$('#tblName').dataTable({
"sScrollY": 130,
"sScrollX": 100,
"bJQueryUI": true,
"sScrollX": "100%",
'aaSorting': [[6, 'asc']],
"bAutoWidth": false,
"aoColumns": [{ "sWidth": "20%" }, { "sWidth": "15%" }, { "sWidth": "20%" }, { "sWidth": "15%" }, { "sWidth": "5%" }, { "sWidth": "5%" }, { "sWidth": "10%" }, { "sWidth": "5%" }, { "sWidth": "5%"}]
});

heather

Hi there,
I have the exact same problem as the one with PaoloValladolid. I have just downloaded the latest version 1.9.1 and still the same. Please help. Thank you very much.
H

heather

I solved the issue by added the following:
"sScrollX": "100%",
"sScrollXInner": "200%"

to the datatable.

So I am good now. thanks.

salil

In my data table I have 19 columns. The first 3 of these have been freezed, using FreezeColumns. Now I am unable to fix the width of the Table and the coulmns extend out of the Container Div.
I have tried bAutoWidth and aoColumns (to set the width of the 19 coulmns in %)

codemonkey65

I have a similar problem to Trinesh's. My table is defined as follows:

$('#grdLoadingData').dataTable({
"bLengthChange": false,
"bPaginate": true,
//"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaData": records,
"sDom": "T<'clear'>lfrtip",
"oTableTools": {
"sRowSelect": "multi"
},
"bAutoWidth": false,
"sScrollY": 400, //height
"sScrollX": "100%",
"aoColumns": [
{ "sTitle": "MC #", "sWidth": "40px" },
{ "sTitle": "Order #", "sWidth": "40px" },
{ "sTitle": "Site", "sWidth": "25px" },
{ "sTitle": "Seq. #", "sWidth": "15px" },
{ "sTitle": "PO #", "sWidth": "50px" },
{ "sTitle": "Order Date", "sClass": "center", "sWidth": "25px" },
{ "sTitle": "Load Date", "sClass": "center", "sWidth": "25px" },
{ "sTitle": "Ship Date", "sClass": "center", "sWidth": "25px" },
{ "sTitle": "Sold To", "sWidth": "75px" },
{ "sTitle": "Order Type", "sClass": "center", "sWidth": "25px" },
{ "sTitle": "Ship Via", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "W/Sys", "sWidth": "100px" },
{ "sTitle": "NP", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "%", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Invoice Amt", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "CT", "sWidth": "sClass": "center","50px" },
{ "sTitle": "Destination", "sWidth": "50px" },
{ "sTitle": "Model", "sWidth": "50px" },
{ "sTitle": "DU", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Containers", "sWidth": "50px" },
{ "sTitle": "Con. Type", "sWidth": "50px" },
{ "sTitle": "Con. #", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Sail Date", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Act. Sail Date", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Weight", "sWidth": "50px" },
{ "sTitle": "Sail Port", "sWidth": "50px" },
{ "sTitle": "Vessel", "sWidth": "50px" },
{ "sTitle": "Final Dest.", "sWidth": "50px" },
{ "sTitle": "Status", "sWidth": "50px" },
{ "sTitle": "ETA", "sWidth": "50px" },
{ "sTitle": "Act. Arrival Date", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Comments", "sWidth": "50px" },
{ "sTitle": "Booking #", "sWidth": "50px" },
{ "sTitle": "Carrier", "sWidth": "50px" },
{ "sTitle": "Incoterms", "sWidth": "50px" },
{ "sTitle": "LRD", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "ERD", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Region", "sWidth": "50px" },
{ "sTitle": "Freight Quote", "sWidth": "50px" },
{ "sTitle": "Freight Actual", "sWidth": "50px" },
{ "sTitle": "Forwarder", "sWidth": "50px" },
{ "sTitle": "ISR", "sWidth": "50px" },
{ "sTitle": "GB", "sWidth": "50px" },
{ "sTitle": "Tires", "sWidth": "50px" },
{ "sTitle": "EOFS", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Trailer", "sWidth": "50px" },
{ "sTitle": "CPD", "sClass": "center", "sWidth": "20px", "sClass": "center" },
{ "sTitle": "BOL #", "sWidth": "50px" },
{ "sTitle": "Del. Date", "sClass": "center", "sWidth": "50px" },
{ "sTitle": "Shorts", "sWidth": "50px" },
{ "sTitle": "OrderStatus", "sWidth": "0px" },
{ "sTitle": "DepartureDate", "sWidth": "0px" },
{ "sTitle": "GroupingValue", "sWidth": "0px" }
]
}).rowGrouping({
bExpandableGrouping: true,
iGroupingColumnIndex: 52
});

I then hide selected columns using

function hideColumns(viewName) {
var columns = getColumnArray(viewName);
var table = $('#grdLoadingData').dataTable();
for (var i = 0; i < columns.length; i++) {
table.fnSetColumnVis(columns[i], false);
}
}

Regardless of how many columns I display or hide, the column widths stay fixed and do not resize to the widths I've defined in aoColumns. If I remove the sScrollX property the table will then display using the defined column widths. Something is conflicting between the sScrollX and the sWidth property in aoColumns. Anyone have any ideas?

iGroupingColumnIndex: 52
});

AjitNalawade

guys try this ......

$(document).ready(function () {
$("#companiesTable").dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bAutoWidth": false, // Disable the auto width calculation
"aoColumns": [
{ "sWidth": "30%" }, // 1st column width
{ "sWidth": "30%" }, // 2nd column width
{ "sWidth": "40%" } // 3rd column width and so on
]
});
});

specify the css for table

table.display {
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed; // ***********add this
word-wrap:break-word; // ***********and this

}




Company name
Address
Town



<% for(Company c: DataRepository.GetCompanies()){ %>

<%=c.getName()%>

<%=c.getAddress()%>
<%=c.getTown()%>


<% } %>



It works for me.......

eruiz

Hi all, the DT configuration below works for me too
[code]
"bAutoWidth": false, // Disable the auto width calculation
[/code]
Regards

AntonyManoj

Thanks AjitNalawade my issue solved by your post

fastedy

AjitNalawade you're a hero. This was driving me crazy and your post fixed it.

Justin_M

AjitNalawade - awesome, thanks!

waris_anjum

kindly help me!! i want to decrease the width of start date and end date i have configure the code but no effect in date column, here is my code... specially to AjitNalawade :), when i applied the CSS table-layout:fixed; it shrink in a page and all the "columnFilter's" data get out of order all the heading going to disturb.




CSS :-


table.display {
margin: 0 auto;
width: 100%;
clear: both;
border-collapse: collapse;
table-layout: fixed;
word-wrap:break-word;
}


HTML :-
























Status
RAG Status
Proposal ID
Project Number
Job Number From Cash
1st line of address
Site ID
Project Manager
Installer
Discipline
Start Date
End Date
Per% Info
Per% Admin
Per% Re-Spec
Created Date
Last Update



<?php some data ?>



Jquery :-



var jobsDataTable;
$(document).ready(function() {
$.datepicker.regional[""].dateFormat = 'dd-mm-yy';
jobsDataTable = $('#jobsTable').dataTable({
'bServerSide':false,
'bUseRendered' : false,
'bAutoWidth': false,
'aoColumns': [
null,null,null,
{ "sType": "num-html" },
null,null,null,null,null,
null,{"sWidth": "5%"},{"sWidth": "5%"},null,null,
null,null,null
],
"aaSorting": []

}).columnFilter({

'sPlaceHolder': "head:before",
'aoColumns': [
{type: "select"},
{type: "select"},
null,null,null,null,null,
{type: "select"},
{type: "select"},
null,
{type: "date-range"},
{type: "date-range"}
]});
});


kindly reply, thanks.

Barney

AjitNalawade ，you are the hero~

Rajamohan

AjitNalawade, you saved my day. Thanks much