Header transparent With fixedColumns

ataykandy

I applied the fixedColumns attribute to my data table definition to freeze the first few columns. Now, when I use the scrollbar to navigate to the right, my fixed column headers text are getting garbled while scrolling. Could you please help me with this issue?

Here is how I setup my table:
oTable = $('#DataGrid').DataTable({
destroy: true,
paging: false,
autoWidth: false,
scrollX: true,
scrollY: defaultPSSettings.gridResultHeight,
data: aaData,
fixedHeader: true,
fixedColumns: {
leftColumns: 14
},

kthorngren

One problem you have is fixedHeader is not compatible with scrollX and scrollY:
https://datatables.net/extensions/fixedheader/

That may be what's causing your header problem.

Kevin

ataykandy

I did try this code without fixedHeader. Unfortunately, still not working.

kthorngren

I tried your code with a test case. I think I'm seeing a different issue than you. If my leftColumns option is set higher than the number of columns the page can display without scrolling I'm not able to scroll to the right of the number, in your case 14. I also see a horizontal scrollbar under the first few columns. Once I set leftColumns to a number that is visible then fixedColumns and scrollX work as expected. Is this what your are seeing?

Test case:
http://live.datatables.net/solazona/1/edit

Sounds like you are seeing something different. If different then please provide a link showing the issue. You can update my code if you want.

Kevin

allan

Wow - 14 fixed columns!

My guess is that the CSS for FixedColumns isn't being loaded, but really, as Kevin says, we'd need a test case showing the issue.

Allan

ataykandy

Sorry, I should have clarified. I inheritance this code from anther developer. The application is very complex and I only provided a part of the source code. The table does contain more than 40 columns some of which are hidden. The scrolling does work however the fixed columns section text gets garbled.

Allan, I do believe this is related to some css issue. However, I can't reproduce the problem independently from the main source code. I did find an old posting from you related to this issue.

https://datatables.net/forums/discussion/9346

However, I am not sure how to apply the following code in my source code

[code]
.FixedHeader_Cloned th { background-color: white; }
[/code]

Here's another person with a similar issue:
https://datatables.net/forums/discussion/28612

See the attached image.

Thanks for your help.

allan

Are you using the latest versions of DataTables and FixedHeader? That would perhaps be the best place to start.

Allan