Removing "nowrap" did not work with V2.2.1

rfertig

Description of problem: As mentioned in Default Styling Options, you can add the CSS class nowrap to the table element to prevent the table content from being split into multiple rows. I've been doing this for years with JQuery:

$('table.dataTable').toggleClass("nowrap");

Now I've moved from DataTables 1.14.1 to 2.2.1. Adding nowrap still works, but if nowrap is removed, nothing happens - even if I do a draw().

What can I do?

René

kthorngren

The nowrap class seems to work as expected in this test case:
https://live.datatables.net/nagiwivo/1/edit

I added a button to execute the code snippet you provided and that seems to work as well.

The first table has nowrap applied and the second doesn't. Can you provide a test case showing thw issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rfertig

Thanks, Kevin.

I modified your test case to apply my initialization of DataTable and this way I found out that the scrollX is causing the problem, see: https://live.datatables.net/damaxuji/1/edit

I don't know why the problem arises, but since I can omit this option, the case is solved for me.

René

kthorngren

Thanks. I'm not sure how to fix this as it doesn't seem columns.adjust() works either. As you mentioned forcing a Datatable draw doesn't work either. However I did notice if the container size changes then the table display changes. For example close the HTML tab of your test case. Not sure if there is a Javascript method that can be executed to refresh the page display after the toggleClass. @allan might have suggestions.

Kevin

allan

Once a table has the nowrap class added it is quite difficult to remove it because the long lines are forcing the width.

Removing nowrap doesn't work because the column widths have been set to match between the header and body (to ensure column alignment).

columns.adjust() doesn't work because it draws the table at 100% width in the container, and the container is already stretched by the nowrap content.

The column width calculations have changed in DataTables, which is the cause of the difference between 1.x and 2.x (in fact even since 2.0 and 2.1 I think this might have changed a little).

Glad to hear that you can just drop scrollX to get the effect you want though.

Allan