[Bug] Datatables Wordwrap on Bootstrap 5

[sstvdj]

Version

1.03

Reproduction link

https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/applications/datatables.html

Operating System

Mac OS

Device

Macbook

Browser & Version

Safari 14.1.2

Steps to reproduce

The "word wrap" function for a column is not working. I used your example here: https://demos.creative-tim.com/soft-ui-dashboard-pro/pages/applications/datatables.html and added a long string of text to the first row of the final column. I've used the "wrap" commands, I've tried to style the table column and it doesn't wrap the string.

What is expected?

The long string should wrap inside the card without adding a horizontal scroll to the card.

What is actually happening?

The string in the column is displaying as a single line and stretching the table horizontally as a single line. It stretches the card and will horizontally scroll, but I would like to keep the entire table inside the fixed card.

---

Solution

I do not have this issue using a basic downloaded file of the Bootstrap 5 data tables directly from their website, but when I try to use it on your pages, it does not wrap. Is there some kind of CSS conflicting with it?

Thank you for your assistance!

Additional comments

[rarestoma]

Hi @sstvdj,

Thank you for working with our products.

Can you please give us the code that you used so we can test it and find a solution?

Best regards, Rares

[sstvdj]

datatables2.html.zip

It happens with your example datatables.html page in pages/applications/datatables.html. I zipped up the file and attached it with a string in the last column to demonstrate the issue. I've also attached a screenshot of what happens.

[sstvdj]

Hello, do you have any updates on this issue?

Thank you!

[rarestoma]

Hi @sstvdj,

Sorry for my late response.

To remove the horizontal scroll please try removing white-space: nowrap; option from .table td, .table th in the css file:

.table td, .table th {
    white-space: nowrap;
}

Please let me know if it works.

Best regards, Rares

[sstvdj]

Hi, that was close. I changed it to white-space: normal; and it is now wrapping correctly for my needs. Appreciate the help!