Problems with NOWRAP and child row with when I enable responsive table

asle

I have added child rows from the example https://datatables.net/examples/api/row_details.html . Now I want to add responsive to the table. I have a problem that when I show the child row, the table is way to wide even for the container. I thought maybe there was some configuration problem but notice that when I remove "nowrap" from the table it is fine. But then the responsive does not work. When I have table class="display responsive nowrap" any long text in a TD in child row breaks the width. Is there a way to fix this?
Here is closed: https://www.screencast.com/t/OQrJtrus3Bc
Here it is opened: https://www.screencast.com/t/WOMclzely

colin

Hi @asle ,

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

asle

Thanks for response! Here is the tables
https://dev.biofokus.no/prosjekter/

I "fixed" the child table not breaking the layout with this css, first lines are to remove the "+" since I have my own style for that. I also have a style "child" on the child row.

table.dataTable.dtr-inline.collapsed > tbody > tr > td.details-control:first-child:before { display: none;}
table.dataTable th, table.dataTable td { white-space: normal; }
.child {table-layout:fixed} .child td {word-wrap:break-word; white-space: normal !important;}

As you see the text in the first line is long so with "NOWRAP" on the table I can not compress it to mobile width. When I remove "NOWRAP" in the table, responsive does not work.

Is it an idea to and possible to have text wrap for only the first cell?

allan

Yes, use columns.className to apply a specific class for the columns to don't want to wrap and then using something like:

td.nowrap {
  white-space: nowrap;
}

Allan

asle

Thanks, the problem is still that when I remove "nowrap" from the class of the main table the responsive does not work.

<

table id="example" class="display responsive nowrap" style="width:100%">
Here:
https://dev.biofokus.no/prosjekter/
I want the first and last column to stay on mobile screen. But there is not room for the table and it goes outside the view. I have set this code to keep the first and last column on mobile view.
````
"columnDefs": [
{ responsivePriority: 1, targets: 1 },
{ responsivePriority: 2, targets: 4 },
```
- If I remove "nowrap" from the table class this does not work.

I am maybe doing it wrong? I am using a function to generate child rows. Is it better in my setup to leave this approach (generate child row on the fly) to instead have the rows in the table like this:
<tr>
<td>Row1</td>
<td>Row2</td>
<td>Row3</td>
<td>Row4</td>
<td>Row5</td>
<td>Row6</td>
</tr>
and then just use responsive to automatically push e.g. row 4-6 to a subrow?
I am just confused because the first row is often too long to not wrap. So I want text wrap AND hide all rows responsive except 1 and 3 (row 0 is my trigger now)

allan

I'd suggest removing the nowrap from the table. Then add nowrap as a class to the columns you don't want to wrap and use the CSS I put in above. Let's see where we are at with that in place.

Allan

asle

Thanks allan, but I don't think responsive tables will work with my data since the content in some cells are too long. When I set the table to responsive and remove the "nowrap" from the

<

table> it does not behave responsive. Works fine with nowrap in table tag. But then it seems it does not understand when to breakpoint and remove a cell from the view. Is this tricky with responsive and child rows? Seems it does not work well together. Do you have any example where the table is responsive but at the same time long text in a cell that wraps. Also I want to customize the child cells and not have them populated from the responsive plugin.

asle

I am lost now and don't understand why my table does not work on mobil screen.
I have tried different solutions, with or without NORWAP on the TABLE, I would be glad if anyone could have a quick look at my table and any suggestions as to why it does not work on mobile view. I can get it to show better on iPhone 6 than on iPhone 5.
https://dev.biofokus.no/publikasjoner/
https://dev.biofokus.no/prosjekter/

• I want all cells to wrap text since some content can be long.
• I want the first and last cell to be the last to collapse.

I have this code on the table:

<table id="example" class="display " cellspacing="0" style="width:100%">

In js I have this code which should make a priority on the first and last cell to show when the space is too small. This seems to have no effect.

 "columnDefs": [
            { responsivePriority: 1, targets: 1 },
            { responsivePriority: 2, targets: -1 }, 

allan

You are using bootstrap's container class which has:

@media (min-width: 0px)
.container {
    width: 750px;
}

So the content is never going to be smaller than 750px width. I would suggest using a fluid container as described in the Bootstrap documentation.

Allan

asle

Thanks @allan! You are so helpful! I changed the class to "container-fluid". And as far as I can see it helped! I had forgot to check the Wordpress theme that uses bootstrap. Hope you get some big presents for xmas. You deserve it :-)

lenamtl

Hi @asle,

I'm using nowrap everywhere in the table and having similar issues.
.dataTables_wrapper th, td { white-space: nowrap; }

I'm sharing what I have tried maybe we can find eventually find some solution...

One of the solution could be (I have not tried yet) is to NOT have the nowrap class for the child element only and keep it for the rest. (I have not tested yet, not sure how to implement) I think this is worth a try,
i'm not so sure if this can be compatible with column reorder or column visibility..

I have tried many things, my goal is to have all row the same height, this is look cleaner to my opinion.

One solution is to show less character in table and have the whole content in a tooltip.
There is a plugin called** ellipsis **to show text in tooltip but it is not work well with responsive (child).

I have also tried to use <title> to display long text as a tooltip but this is not working too with responsive (child).
*Both create problem like extra span added, non well formatted code, extra quote, plus this won't work well with other function like colreorder ..

Another solution would be to display long text in a modal or having another child element in the main child to toggle another content .
The thing is modal is not playing nice with responsive because there is already a way to display modal content and this cannot be active with responsive as it use the same logical. (I have not tested this yet and I think this is maybe not very user friendly)

So there is no much solution for long text.
To keep the nowrap I end up to display limited characters for long text and have a button to see the whole text in a new page, this is not very user friendly but this is the only solution that is compatible with all.