Vertical blue line for column reorder is not positioned correctly when buttons colvis is used too

Vertical blue line for column reorder is not positioned correctly when buttons colvis is used too

marcelgroenewegmarcelgroeneweg Posts: 12Questions: 4Answers: 0

Hi,

I have column reorder and buttons column visibility enabled on a table. When one or more columns are hidden, the vertical blue line is positioned through other columns rather than right between two columns. Also, the columns is not relocated to the drop location. When all colums are visible, everything is just fine. This is with default datatables styling. I'm on the latest datatables download and latest extensions.

This question has an accepted answers - jump to answer

Answers

  • marcelgroenewegmarcelgroeneweg Posts: 12Questions: 4Answers: 0

    Could it be that something has already been done on this? The nightly build in DataTables live seems OK? I would really like to have this confirmed as this combination is the main feature customer wants in their tables.

  • marcelgroenewegmarcelgroeneweg Posts: 12Questions: 4Answers: 0

    Just another thought: I do not have a static HTML to attach DataTables to. All pages are built dynamically. Do I need to send some signal to DataTables to check its surroundings?

  • marcelgroenewegmarcelgroeneweg Posts: 12Questions: 4Answers: 0

    A similar setup in DataTables live works. I tried inserting columns.adjust() but that did not help. It is server-side processing. Is the columns.adjust() function performed when I call the data tables callback?

    This only happens when column reordering and column visibility are combined on one table. Without column visibility, or when all columns are visible, the column reordering works correctly. It seems that the column reorder is off by one or two columns when one or more columns are hidden.

  • jr42.gordonjr42.gordon Posts: 305Questions: 2Answers: 49
    Answer ✓

    A couple things:

    1. Make sure following styling is not being overwritten
    table.dataTable, table.dataTable th, table.dataTable td {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
    
    1. If the first column in your table is hidden, this will also cause your issue. Not sure why this is. I solved this by making the first column in my tables fixed and not usable by colVis. Just find a column that makes sense to be the first column that you wouldn't want hidden.
  • marcelgroenewegmarcelgroeneweg Posts: 12Questions: 4Answers: 0

    Thanks! showing the first column did the trick! So this does seem like a bug. I'm integrating DataTables as a building block in a development platform. I'd rather not tell the other developers that they must include a fixed column to prevent this issue.

    @Allan: Any chance on a fix for this?

This discussion has been closed.