All headers overlapping on top of one another

BenkaiDebussy

Example page: http://gn2_zach.genenetwork.org/show_trait?trait_id=1436869_at&dataset=HC_M2_0606_P

• Go to Mapping Tools and for the first option, pyLMM (it should be default), just hit "Open Mapping Tool"
• The results table should appear under the figure that is inside the colorbox (I know it's kind of strange to have to scroll inside the colorbox)

debugger: http://debug.datatables.net/ijahiw - the issue is with table qtl_results

I'm trying to use DataTables plus some plugins (colResize, colReorder) for the results table that shows up under the figure, but for some reason my headers are overlapping with one another. I think that this is related to their widths being set to 0, but I can't find where this is taking place. The only way I found to get around it was to manually set each column's width in pixels, but I would prefer not to do that. I'm sure I'm doing something wrong with the way I'm initializing the table, but after experimenting with a bunch of the settings I can't figure out what.

Thanks!

Ashbjorn

Hi BenkaiDebussy,

Could it be because of you setting autoWidth to false?

Also it might conflict with the scrollY property, does it help setting scrollCollapse to true?

The scroll container has it's width set to 100px, so this limits the space the columns can occupy. I am not sure what causes that exactly :-\

Hope this helps,

BenkaiDebussy

After trying a bunch of different options and adding/removing plugins, I found out a few things:

• The overlap was fixed when I replaced colResize with the newest version.

• The column headers still don't match the width of the columns. It seems like the headers are having their width automatically set based on their contents, while the row column widths are automatically filling the div that the table is inside of.

• The problem only occurs when scrollY is enabled.

• If I click a header to reorder the column, the headers will then expand out to match the columns.

So I guess the current problem is with the header width not initially matching the column width. The problem only occurs when "scrollY" is enabled, and changing "autoWidth" or "scrollCollapse" doesn't seem to make a difference. The problem is that I need either Y scrolling enabled OR fixedHeaders to work (since both allow headers to be visible while looking at table contents), but the latter doesn't seem to work with the colResize plugin I'm using. Here's an updated version of the debug, and the updated table can be reached from the same link/instructions in the OP (click Mapping Tools and then Open Mapping Tool):

http://debug.datatables.net/uwegox