Wrap Text within responsive details view

Wrap Text within responsive details view

x3rtx3rt Posts: 8Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 19,974Questions: 26Answers: 4,702

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

    Kevin

  • allanallan Posts: 61,098Questions: 1Answers: 9,962 Site admin
    tr.child ul {
        white-space: normal;
    }
    

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

    Allan

  • x3rtx3rt Posts: 8Questions: 2Answers: 0

    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

  • x3rtx3rt Posts: 8Questions: 2Answers: 0
  • allanallan Posts: 61,098Questions: 1Answers: 9,962 Site admin
    Answer ✓

    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

  • x3rtx3rt Posts: 8Questions: 2Answers: 0

    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!

Sign In or Register to comment.