How to remove redundant Responsive's expand buttons from the tables in child rows?

NumberFour

Before I started using the Responsive extension I implemented the "child rows" functionality to display additional information (esentially a small table in the child row, exactly as described in this Example). I put the expand buttons on the right side of the table (in a special "Details" column).

Recently I decided to also make my table responsive using the Responsive extension. Now if the viewport shrinks, I get an extra expand button on the left which displays the hidden columns - this works as expected.

In the shrank viewport, when I click my expand buttons in the "Details" column on the right, it displays the additional information. However, the displayed child table also has these expand buttons on the left, like if it inherited the "responsive behavior" from the parent table.

The this image speaks for itself.

Does anybody had a similar problem or knows how to remove those redundant expand buttons from the table in the child row?

It's probably some CSS tweaking/removing some class, but I don't know the internals of the Responsive extension.

allan

Unfortunately Responsive and custom child rows don't really play together as Responsive uses DataTables' child row methods itself. So you might get a conflict between your own code and Responsive.

Having said that, yes, your image shows a CSS conflict. It is something that has already been fixed in the Responsive nightly and will be released soon.

Allan

NumberFour

Hi Allan,

thanks for your response!
I'm gonna try the nightly build and let you know if the problem is fixed.

NumberFour

So I tried the nightly build, and it fixes the issue mostly. Now the redundant buttons in the child table rows are gone, the only one which remains is the one corresponding to the row containing the child table (c.f. my new image ).

Thanks for the good work! I'm already looking forward for the next stable. Is there a chance it's getting fixed entirely any sooner?

allan

The problem is here - each row in the tbody is being assigned the CSS required to show the button.

As I say, the child row display and Responsive aren't designed to operate together, so I am unlikely to address this directly. Additionally, actually fixing it properly would be very hard as Responsive's CSS has no way to know what rows are child rows and which are parent rows (you set the class for that in the code that utilises the API).

So what I would suggest is you add something like to your CSS:

table.dataTable.dtr-inline.collapsed > tbody > tr > td.details-control:first-child:before {
  display: none;
}

Allan