Skip to content

Commit

Permalink
Fix: Improved DOM ordering for scrolling tables - colgroup, thead, tfoot
Browse files Browse the repository at this point in the history
- Fixes DataTables/FixedColumns #8
  • Loading branch information
AllanJard committed Feb 2, 2016
1 parent e06a6a4 commit aca54b9
Showing 1 changed file with 9 additions and 6 deletions.
15 changes: 9 additions & 6 deletions js/core/core.scrolling.js
Original file line number Diff line number Diff line change
Expand Up @@ -227,18 +227,18 @@ function _fnScrollDraw ( settings )
// Remove the old minimised thead and tfoot elements in the inner table
table.children('thead, tfoot').remove();

// Clone the current header and footer elements and then place it into the inner table
headerCopy = header.clone().prependTo( table );
headerTrgEls = header.find('tr'); // original header is in its own table
headerSrcEls = headerCopy.find('tr');
headerCopy.find('th, td').removeAttr('tabindex');

if ( footer ) {
footerCopy = footer.clone().prependTo( table );
footerTrgEls = footer.find('tr'); // the original tfoot is in its own table and must be sized
footerSrcEls = footerCopy.find('tr');
}

// Clone the current header and footer elements and then place it into the inner table
headerCopy = header.clone().prependTo( table );
headerTrgEls = header.find('tr'); // original header is in its own table
headerSrcEls = headerCopy.find('tr');
headerCopy.find('th, td').removeAttr('tabindex');


/*
* 2. Take live measurements from the DOM - do not alter the DOM itself!
Expand Down Expand Up @@ -418,6 +418,9 @@ function _fnScrollDraw ( settings )
divFooterInner[0].style[padding] = bScrolling ? barWidth+"px" : "0px";
}

// Correct DOM ordering for colgroup - comes before the thead
table.children('colgroup').insertBefore( table.children('thead') );

/* Adjust the position of the header in case we loose the y-scrollbar */
divBody.scroll();

Expand Down

3 comments on commit aca54b9

@jainswapnil90
Copy link

@jainswapnil90 jainswapnil90 commented on aca54b9 Feb 3, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#92 Hi Team,
The issue is still there in IE11.

I have few grouped columns render but the header column "dataTables_scrollHead" are not aligned with tbody. when scrolll bars are enabled.

image

@DataTables
Copy link
Collaborator

@DataTables DataTables commented on aca54b9 Feb 3, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you link to a test case showing the issue please.

edit Oh and please post issues on the DataTables forums with your link to the test case.

@warmsley
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, see it: example

Please sign in to comment.