How to Center Cell Contents in Expanded Row (+)

Alija

Hi,

This is the first time posting a question here so please bare with me. I have a couple of questions with regards to using the bootsrap styled datatables. I'm basically using the default datatable found here without and changes or customizations. https://datatables.net/examples/styling/bootstrap.html.

A screenshot of my current table can be seen here which will hopefully make the below easier to understand.
http://postimg.org/image/kipydiy5t/

My first question is, when using the following classes for the table
class="table table-striped table-bordered dt-responsive nowrap"
it has this functionality whereby if the contents of a row exceed the max width the of the table, it hides the last column/columns and it generates a little "+" button. This '+' button then goes on to expand the hidden columns when clicked below the respective row.

My first question is, can I explicitly define a column to be hidden under the '+' sign even if the row content does not exceed maximum table width.

My second question is, how do I go about centering contents that are found in the expanded section. In the image above it is an embedded video (which has a div of its own inside <td>. I have tried lots of things and have been googling for hours but no luck.

Regards,
Alija

allan

Hi Alija,

can I explicitly define a column to be hidden under the '+' sign even if the row content does not exceed maximum table width.

Use columns.className and set the class name for that column to be none. See the special classes documentation for details.

My second question is, how do I go about centering contents that are found in the expanded section.

The row().child() method provides an optional option (second parameter) to set a class name for the child row. You would use that to set a class name, and then in CSS simply add td.myClassName { text-align: center; }.

Allan

Alija

Hi Allan,

Thank you for the response. The first point was nice and easy.

Having a bit of trouble with the second one though. How do I go about calling that API on every row child in my datatable to add a class to it? Also, what would stop me from adding a class to the <td> tag in html and then adding the line of CSS, as I know which column is the child row.
Also, I read this in the description for the API,
"Note that calling this method will replace any child rows which are already attached to the parent row." Does this mean the content I have added in <td> tag in html will be removed and replaced with content passed to the API call?

Alija

allan

How do I go about calling that API on every row child in my datatable to add a class to it?

Presumably you are already calling that API method? Otherwise I don't see how you would be able to use it :-).

I'd really need a link to a page showing the issue to be able to understand what code you are using.

Allan

Alija

Hi Allan,

I've managed to butcher and put together the relevant pieces of code here:
https://jsfiddle.net/Alija/hy8vg5dt/

I haven't tried to add any code with regards to the second point on using row.child() API.
When you expand the child row, as you can see the title and the

<

div> are on the left and I'm trying to get these centered.

Thanks again for the help.

Regards,
Alija

Alija

Hi Allan,

We're you able to view the example I provided using jsfiddle ok?

Regards,
Alija

UPEngineer

You're expanded section adds the class "child". Add a .child {text-align:center;} to your CSS declaration. I did this in your jsfiddle and seems to work as you wanted.

Unless I am missing something here.