Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Datatable cell wrapping

RossK1 priority asked 2 years ago


Hello, I am creating a datatable with 8 columns. Two of these columns have strings of ~40 characters. I need be able to show the full string by wrapping the text within the cell.

Expected behavior With a column width define, the cell text is wrapped to fit. Where it wraps (between words, on whitespace, hard character split) is not particularly important for this application, but wrapping on whitespace would be nice. I have tried manually wrapping by inserting
at appropriate locations in the string. This does cause the text to wrap, but it is still being truncated.

Actual behavior Text outside the column width (or perhaps with some preset constant) is truncated with "..." on the end.

Resources (screenshots, code snippets etc.) The example on the website will work fine for demonstration, So take the table here, I would like the entire message to be displayed as wrapped text.


Michał Duszak staff answered 2 years ago


Try to add this in your styles:

.datatable table td, .datatable table th {
    text-overflow: unset;
    max-width: unset;
}

RossK1 priority commented 2 years ago

Works perfectly, thank you :) I have another function that parses the strings and inserts
tags in the appropriate whitespace to cleanly wrap the cell. Might be an idea for another option ... like "fixed", if a "width" is defined, one can specify "wrap" that will wrap the cell contents.


Grzegorz Bujański staff commented 2 years ago

We will consider adding such an option.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.1
  • Device: PC
  • Browser: Chrome 100
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes