Header Row not applying proper widths

marcfarrow

http://debug.datatables.net/okunes

Above is the link to the debug information.

The column width specifications are not being applied to the Header Row.

The strange part is that I am using the same "logic" in other pages and parts of this application and it is working fine.

Here is my rendered table:
[code]


NameNational AccountAddressCityStateZip Code




BOSE CORPORATION

N8806203

THE MOUNTAIN

FRAMINGHAM

MA

01701



BOSE CORPORATION

N8806202

THE MOUNTAIN

FRAMINGHAM

MA

01701



BOSE CORPORATION

N8806201

THE MOUNTAIN

FRAMINGHAM

MA

01701



BOSE

N8806202

3601 SUNSET BLVD

W COLUMBIA

SC

29169



BOSE MANUFACTURING

N8806202

2000 CAROLINA PINES DRIVE

BLYTHEWOOD

SC

29016



BOSE CORPORATION

N8806201

% FRT PYMT PLAN MS #238

FRAMINGHAM

MA

01701



BOSE CORPORATION

N8806201

2000 CAROLINA PINES DRIVE

BLYTHEWOOD

SC

29016



DUBOSE STRAPPING INC

00000000

PO BOX 819

CLINTON

NC

28328




[/code]

allan

You have width:100% on your table but the columns are "static" width totalling 1130px. So does 100% === 1130px? The 100% will "win" because that's how the browser operates.

Try making the absolute pixel sizes relative.

Allan

marcfarrow

Thanks for the response Allan. Your explanation sounds good, but I changed the column widths to be percentage both on the TD/TH levels and also using aoColumns parameter and I am still seeing the same results in all three major browsers (FF, Chrome, and IE 9).

Marc

marcfarrow

Can someone check to see if this is a bug? If I remove the "sScrollY" attribute, the table renders properly. It only gets corrupted when that attribute is added to the initialization object.

Thanks.

Marc

allan

Can you link me to a test case showing the issue please?

Allan

marcfarrow

I posted teh code above and also gave a link to the Debug info. I can't post this stuff anywhere else as it is internal application.

thanks.

Marc

frankd750

Hi Mark - I am a newbie, so pardon any impertinences.

I was having the same problem. After a lot of trial and error, I discovered that one of the styles being applied to the table (in the table tag itself) had a width setting. After greatly expanding that width setting, and also experimenting with, and modifying, the width settings on the tags, it appears that fixed it, for now. However, I am still testing, and am only using one row of data for now. I'll keep you up to date.

Thanks

Frank

marcfarrow

Thanks for the post Frank. Can you tell me exactly what you changed and by how much to make it work?

Thanks.

Marc

frankd750

Hi, Marc:
This is an assignment I’ve inherited, and I am not trying to change the original code too much right now.

The table I am working with is very wide. It has 25 columns, and scrolls off the page to the right. I am working in DEV, and have not migrated anything to PROD yet. The PROD site is at:
http://www.sfs.ny.gov/reportsCatalog/RptCat.html
It is using XML transformation to generate the Data. (Don’t ask – long story. I know – it’s slow. That is another reason I have been assigned to it).

In the table tag, I had:


This “tablesorter” class originally had a width of 899. In DEV, I am now forcing the columns widths in the tags. After my edits, the width of all the columns now adds up to a little over 10,000px. I changed the width on the “tablesorter” class to be 11,000px – a little more than what I need. This appears to have worked. So, maybe you have a class somewhere restricting width of any tables on the page to help solve your issue?

HOWEVER, be warned …..

… This all this goes to hell when I try and turn on "sScrollY": "400px" in the initialization (All I want is vertical scrolling). The header file “dis-lodges” from the rest of the table (there is now a space b/t the header and first data row), The header columns no longer line up with the data columns, and The column widths I set in the tags are no longer applied to the tags or to the tags.

The page has a top level DIV, whose width is also controlled by a CSS class, also set at 899px. I changed it to 11,000px. This helps somewhat with the header-data alignment (but still not perfect), but the header is still dislodged. And that forced the ‘Show # of Items’, ‘Search’ and ‘Paging’ items all the way to the right margin – you could not see them unless you scrolled all the way to the right of this very wide page.

Scouring the Datatables forums here, I have across the suggestion of adding “overflow:auto;” property to a class. I reset the width of the top level DIV back to 899px, and added the “overflow:auto’” property. That correctly displays the ‘Show # of Items’, ‘Search’ and ‘Paging’ items, But I still have the dislodging and Width issues. If I comment out the “"sScrollY": "400px" line, everything looks the way I want it but, of course, I don’t have the vertical scrolling I need.

You, or anyone else, have any suggestions on my current problem when turning on vertical scrolling?

Regards

Frank

marcfarrow

I am actually trying to debug the datatables code now to determine why the inline width styles on the TH columns are set to 0px when I am using a percentage column width. In the snippet below, the offsetWidth of the rendered document returns 0 and thus this is the setting for the column.

[code]
3398 var widthAttr = oSettings.nTable.getAttribute("width");
[/code]

My table has CSS width of 100%, but this is looking for html attribute of width which returns 0.
for testing purposes, I added the following lines to pull width from CSS style so that "35%" is returned.

[code]
3399 if (widthAttr == null) {
3400 widthAttr = $(oSettings.nTable).css("width");
3401 }
[/code]

[code]
3372 var iWidth;
3373 var nTmp = document.createElement( "div" );
3374 nTmp.style.width = _fnStringToCss( sWidth );
3375
3376 nParent.appendChild( nTmp );
3377 iWidth = nTmp.offsetWidth;
3378 nParent.removeChild( nTmp );
[/code]

sWidth = '35%'
the return value of _fnStringToCss = '35%' since the last character is not a digit it just returns as is.
the nTmp object is added to the DOM and then the offsetWidth is returned. This returns 0.
I get exact same results if my lines 3399-3401 are not there. This is why my Header columns' widths are set to 0.


Frank,
I will play around with the width view port and see if I can anything strange about it. I have noticed that with certain styles (especially with borders and or padding in the css styles) the "disconnect" that you are talking about. I noticed that although it looked disconnected, the first row was actually hidden under the "header row" and not showing fully. I had to tweak out the CSS by adding min-heights and padding-top, etc to them to make it "look good". You are correct, this seems to only appear when the sScrollY parameter is used.

Thanks.

Marc

allan

Hi Marc,

Is your table in a display:none element when it is initialised? DataTables will always try to convert percentage values to absolute pixel values in order to try and make pixel accurate rendering possible (this is important when dealing with scrolling and jumping between pages).

What you could do is call fnAdjustColumnSizing when you make your table or its container visible to have the columns recalculated.

Regards,
Allan

marcfarrow

Allan,
Thank you so much. Iniitally, the tables are "hidden" and only get shown after the user interacts with the form. I had been calling fnAdjustColumnSizing, but it was still before the table was "shown" in the document. Once I moved it to after the container was shown, it looks correctly now.

Thanks again.

Marc

frankd750

Hi, Marc, Allan:
I had someone else here look at this and it appears the issues are mainly due to IE (we are standardized on IE-7 right now - maybe soon to be IE-9).

I know your problem is fixed, but wanted to include this if it helps you, and possibly you may see
something here that will help my remaining issues (further below).

My colleague’s edits were:

“I added "sScrollY": "400px", "sScrollX": "100%" to the rptcat.js. This makes the table scroll vertically
and horizontally. I commented out the overflow: auto in the container ID in the style.css. This was adding
extra space to the bottom of the table. I also made the margins 0 in table.tablesorter class. The margins
were adding extra space between the table header and the content. I also removed the cell widths in the header. “

What I have now works BEAUTIFULLY in Firefox. Not so good in IE-7.

Marc, and Allan, if you are monitoring, do you have any answers for my 2 remaining issues? They are:

1. In IE-7 (and I have also tested this in IE-9 with same results), the header row is indented a few pixels, and therefore, the header columns do not line up exactly with the data columns. I cannot see anything in the CSS files that may be causing this.

2. Again, in IE, when you change the number of entries to display, it not only changes that, but also
inexplicably adds a corresponding amount of space between the bottom of the header and the
data rows. For arguments sake, let’s call it 4 pixels. So, when I switch from 10 to 25 entries, not
only does it
display 25 entries, but there is now 100 pixels of space after the bottom of the header row, and the
data rows are pushed down, leaving a blank space (the header rows stays where it should be). If I
change it to 50, it adds 200 pixels of space and the data rows are pushed further down. Change it to
100 entries, it adds even more space and you have to scroll down the page to find the data rows.

Either of you seen either of these issues before and, hopefully, have a quick fix or two. I have tried everything I can think of.

Thanks

Frank

marcfarrow

Frank,
See this other discussion. As I am sure the second post is directly related to the offset issues with the width. My "patch" I posted in original message might lead to some hints as to why the calculation for the header row widths are off.

http://datatables.net/forums/discussion/9424/scroll-body-height-not-calculated-properly-in-ie-7.#Item_1

thanks.

Marc

marcfarrow

Frank,
From the other thread I was able to provide Allan a test sample of some header misalignment issues I was having. After reviewing the test case, here is what he came up with. Are you using "border-collapse: collapse" in your style sheet? I implemented his suggestion and corrected my issues.

Thanks.

Marc

[quote]
Hi Marc,

Thanks for the file. I'm afraid that after working with IE7 for 2 hours I've given up looking for a purely Javascript solution. The problem basically comes down to the border-collapse: collapse; CSS property in IE7. Remove that and everything works great - add it in and I simply cannot get the columns to align (even when I don't actually make any modifications to the DOM - by the fact that there is a TBODY element I think IE must be doing a different calculation for the body table, compared to the header table).

So what I would suggest is doing it in CSS - clean and works in all browsers :-). Add cellspacing="0" to your table and then modify your CSS where it defined the borders on the table to use:
[code]
div.dataTables_wrapper table {
border-bottom: 1px solid black;
border-right: 1px solid black;
}
div.dataTables_wrapper table th,
div.dataTables_wrapper table td {
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: none;
padding: 5px;
}
div.dataTables_wrapper div.dataTables_scrollHead table {
border-bottom: none;
}
[/code]
And that will do it.

Regards,
Allan
[/quote]

frankd750

Hi, Marc: Sorry for the delay - am on other projects, and finally had a bit of time to get back to this.

No, I am not using border collapse. I experimented with it earlier to try and solve the problems, but it did not do much, so I backed it out.

I implemented the cellspacing="0". Reading your other post, I tried linking in 1.9 or nightly. This combination of cellspacing="0" and linking in a more current version fixed the problem of my header being indented a few pixels form the left margin. I tried the CSS changes Allan suggests above, but just can't get the alignment perfect, for some reason. However, it is better now. Unless you scroll over the right and sort on some of the far-right right columns (thereby highlighting the sorted column), it is not that noticeable - like you say in your other post - "It is only a pixel or two here" - and I am not gonna worry about it.

I still have the problem of space being added below the header when I more than 10 entries, and everything is slow in IE7, but I think that's due to IE. I think I'd like to send a self-enclosed folder to Allan and let him have a look at my space issue.

Thanks for all your help - WHERE DO I SEND THE TIP ?? :->

Frank

ALLAN - IF YOU ARE MONITORING, MAY I PLEASE SEND A FOLDER? I AM WILLING TO BUY SOME SUPPORT, IF NEED BE.

From Marc's other post, you mention your e-mail is at the top of the source file, but all I see at the top of the 1.9 file is your "sprymedia" contact. On that page, you ask not to submit Datatables questions.

Please Advise. Check my profile for my e-mail. I'll leave it on for a few days.

Thanks

Frank
518.457.9308 (USA, EST)

sourabgupta01

hi!

If it would be hidden element under tabs then below mentioned solution will work

For tabs solution is

$( "#tabs" ).tabs({

  "show": function(event, ui) {
              var table = $.fn.dataTable.fnTables(true);
              if ( table.length > 0 ) {
                   $(table).dataTable().fnAdjustColumnSizing();
                 }

 }

});