DATATABLE > RESPONSIVE > CHILD ROWS

qqashish

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

child label and its data are very close...not as shown in typical datatable example...what went wrong ?

Thanks

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

qqashish

Thanks Colin,
here it is

http://live.datatables.net/rohohase/1/edit

1. child row label and data are too close.
2. Any way to apply CSS to child rows only.

tangerine

https://datatables.net/examples/api/row_details.html

child row label and data are too close.

The example has the details-control in a separate column.

Any way to apply CSS to child rows only.

The format function in the example could have any CSS applied to it.

kthorngren

@tangerine The question is regarding Responsive child rows

child row label and data are too close.

Do you mean the plus sign PNG? If so you can inspect the element by right clicking on the plus sign to see what styles are applied. I think this is the one you want to checkout:

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td.dtr-control, table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th.dtr-control {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

You may be able to change the padding-left within the Inspect tool to see what value to change. Then override the style on your page. I updated your example with padding-left: 60px;, see the CSS tab.
http://live.datatables.net/rohohase/2/edit

Any way to apply CSS to child rows only.

You can use the browser's inspector in the same way to inspect the child rows. Then decide on what you want to apply where. If you still have questions please provide more specifics of what you want.

Kevin

qqashish

1. Like I already mentioned , Detail Control is not OK as child rows are not searchable.

2. I didnt mean PNG but thanks

I mean child rows after clicking png...pl see label and its descriptions are too close not aligned..

kthorngren

Like I already mentioned , Detail Control is not OK as child rows are not searchable.

Thats not necessarily true. You can use Child Detail Rows and search them. The first option and easiest option is to place all the data you want in the child rows in Datatables columns and use columns.visible to hide the columns.

Or you can do some things like this thread.

I won't be much help with formatting the Responsive child rows.

Kevin

qqashish

Kindly help me format data as shown in screenshot and I will mark this as answered.

In default , its all in straight vertically aligned. I dont know why its like this. Colin can you hear me plz ?

( working again with detail control is again going to consume time , cant do now )

colin

You can format the child rows anyway you like, even with a table as in the example here. The best bet would be to search the forum, as there are plenty of examples that you could use as a template,

Colin