Topic: How to prevent Datatable from truncating column text.

tmdb priority asked 8 months ago


How to prevent data tables from truncating column text. It replaces excess text with "..." I would like it to wrap text instead so that all content in the column is visible.


penguin28 priority answered 7 months ago


Thank you very much Michael!


Michał Duszak staff answered 7 months ago


@max rioux

Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3921095#css-tab-view

I used this CSS:

.datatable table td {
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
}

max rioux priority commented 7 months ago

Thanks, I can't put the status to resolved since I'm not the OP but you solved it !


max rioux priority answered 7 months ago


Is there a way to make the datatable acting the same way as the table?(Transforming text-overflow to multiline)


Michał Duszak staff answered 8 months ago


Try to add this in your styles:

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


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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: MACOS
  • Browser: Chrome
  • OS: MACOS
  • Provided sample code: No
  • Provided link: No