Wrap Text within responsive details view

x3rt

Same issue as described here. Their test case describes the issue I am having

I have tried applying
white-space: normal to the columns via columnDef with no result/change

kthorngren

Sounds like you might need to create a custom renderer. See this example.

Kevin

allan

tr.child ul {
    white-space: normal;
}

should do it. https://jsfiddle.net/rj5sz6v4/ .

Allan

x3rt

I tried what Allan suggested, but that unfortunately did not work. I will try to create my own test-case specific to my own situation

x3rt

Here is my test-case

allan

Thanks. The scrollX complicates things, since it lets the browser think you want the content to expand as much as it wants!

What you need to do is set a max-width for the element and then use word-break (since it is just one big string with no white-space, the white-space option alone isn't enough):

span.dtr-data {
  display: inline-block;
  max-width: 100px;
  word-break: break-all;
  white-space: normal;
}

https://live.datatables.net/wasagori/2/edit

Allan

x3rt

Thank you so much! I feel stupid as I added scrollX when I was trying to fix it and I guess I forgot about it.
You will see me around more as I am rewriting our website from PHP to ASP.NET so I'll also have to renew my Editor License!