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

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

asleasle Posts: 18Questions: 4Answers: 0

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

Answers

  • colincolin Posts: 3,107Questions: 0Answers: 538

    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

  • asleasle Posts: 18Questions: 4Answers: 0

    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?

  • allanallan Posts: 48,480Questions: 1Answers: 7,023 Site admin

    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

  • asleasle Posts: 18Questions: 4Answers: 0

    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)

  • allanallan Posts: 48,480Questions: 1Answers: 7,023 Site admin

    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

  • asleasle Posts: 18Questions: 4Answers: 0

    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.

Sign In or Register to comment.