Bubble position does not get calculated for middle row in the table.

tomekkie

Could anyone have a look at my table?

http://virtualplayground.d2.pl/GUF/stand5.php?92cc227532d17e56e07902b254dfad10

2-nd and 4-th column of the table have the bubble edit option attached. However - for the 5th row in the table - the bubble position (DTE DTE_Bubble) does not get calculated, the form nodes do not get included and the bubble falls out of the screen. It always happens in 5th row, no matter the table sorting and the actual row content.

tomekkie

Solved it. Changed:

$('#graphics').on( 'click', 'tbody td:nth-child(3), :nth-child(5)' ,function (e) {
    editor.bubble( this );
} );

to

$('#graphics').on( 'click', 'tbody td' ,function (e) {
    if ( $(this).index()==2||$(this).index()==4)  editor.bubble( this );
} );

and now all works as intended.

allan

The other way I use to do this is to have a class called editable on the columns that are editable (assigned using columns.className) and only allow editing on cells with that class - slightly easier than keeping track of indexes I think.

Allan

tomekkie

Thanks, I got it, but the link is dead and you probably meant this: https://datatables.net/reference/option/columns.className

But with that way you have to set it in 2 places;

            $('#graphics').on( 'click', 'tbody td.editable' ,function (e) {
                editor.bubble( this );
            } );
.....
        "columnDefs": [ 
         { className: "editable", "targets": [ 2,4 ] },
......

if you have really meant that.
BTW is there anything wrong with my first method with 'tbody td:nth-child(3), :nth-child(5)'?

allan

Indeed I did - thanks for pointing that out. I've edited the post above to correct it.

BTW is there anything wrong with my first method with 'tbody td:nth-child(3), :nth-child(5)'?

Not at all! Either approach is fine.

Allan

tomekkie

"Not at all! Either approach is fine."

• means I have found a bug.

allan

The error is with the second selector:

:nth-child(5)

It should be similar to the first:

tbody td:nth-child(5)

Otherwise it will match any 5th child (in this case the row node - and hence the issue).

Allan

tomekkie

Thanks, tested that, you are right, as always.