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

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

NumberFourNumberFour Posts: 3Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

  • NumberFourNumberFour Posts: 3Questions: 1Answers: 0

    Hi Allan,

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

  • NumberFourNumberFour Posts: 3Questions: 1Answers: 0
    edited March 2015

    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?

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    edited March 2015

    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

This discussion has been closed.