Unable to select text after expand on a responsive table

Desconhecido

Hello,

When using a responsive table, I am unable to select any of the text after I expand the line details.
Even on the site example: https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

If I expand any row, I'm unable to select (to copy/paste) the email addresses.

Dragging the mouse or dbl click doesn't select the text. The only way I found to select the text is start grabbing text from the end of the previous line, but this makes it impossible to select just a specific word or a cell if multiple were hidden under the details.

Tried on Firefox and Chrome.

Desconhecido

This example posted in the blog back in July 2014 works fine, so I guess it got broken on more recent versions of responsive tables:

https://www.datatables.net/blog/2014-07-16

Anyone has any idea how to fix this?

Icos

This problem still exists. Even with child rows disabled (https://datatables.net/extensions/responsive/examples/child-rows/disable-child-rows.html).

Was anybody able to fix that?

IRONM4N

This needs to be addressed. I can't move forward on my dataTable implementation with this issue. I will give it a go on finding out the culprit.

IRONM4N

looks like something in responsive type:'column' causes it. If set to 'inline' I can select the row and individual cells text, but still unable to select all the child detail text when displayed

IRONM4N

https://github.com/DataTables/Dist-DataTables-Responsive/commit/adc9a06bf37307612f90e8f3951609e552f590ea

issue solved 4 days ago...

Icos

Thanks for letting me know!

IRONM4N

FYI: the github version fixed text selection for me but killed responsiveness so I put the two together and this is what is needed replace this chunk of code with the existing similar code chunk, about line number 558 in the 2.0.0 dataTables.responsive.js file.

      $( dt.table().body() )
        .on( 'click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
            // For mouse users, prevent the focus ring from showing

            // If the table is not collapsed (i.e. there is no hidden columns)
            // then take no action
            if ( ! $(dt.table().node()).hasClass('collapsed' ) ) {
                return;
            }

            // Check that the row is actually a DataTable's controlled node
            if ( ! dt.row( $(this).closest('tr') ).length ) {
                return;
            }

            // For column index, we determine if we should act or not in the
            // handler - otherwise it is already okay
            if ( typeof target === 'number' ) {
                var targetIdx = target < 0 ?
                    dt.columns().eq(0).length + target :
                    target;

                if ( dt.cell( this ).index().column !== targetIdx ) {
                    return;
                }
            }

            // $().closest() includes itself in its check
            var row = dt.row( $(this).closest('tr') );

            // Check event type to do an action
            if ( e.type === 'click' ) {
                // The renderer is given as a function so the caller can execute it
                // only when they need (i.e. if hiding there is no point is running
                // the renderer)
                that._detailsDisplay( row, false );
            }
            else if ( e.type === 'mousedown' ) {
                // For mouse users, prevent the focus ring from showing
                e.preventDefault();
                $(this).css('outline', 'none');
            }
            else if ( e.type === 'mouseup' ) {
                // And then re-allow at the end of the click
                //$(this).blur().css('outline', '');
            }
        } );

Icos

On my side the responsiveness is still working, but thanks for the fix anyway!

Desconhecido

if it was fixed by the developer they could had posted it here...

Thanks for letting us know IRONM4N

guillochon

When can we expect this to be rolled into the download builder? When I try to exclude the responsive plugin with the download builder I get all sorts of errors (Error: Invalid build options), even though I'm including the latest version of the responsive plugin locally.

rpmccormick

Is this fixed now? I really don't have time to do a full update like I did on 1/29/16, but I need people to be able to cut/copy text within the child.

All I need to do is download a new "dataTables.responsive.js"? Can someone link to it?

rpmccormick

Nevermind.

For others, just update this:
https://cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js