How to prevent Datatable from truncating column text.

Topic: How to prevent Datatable from truncating column text.

tmdb priority asked 2 years 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.

Add comment

penguin28 priority answered 2 years ago

0 0 Best answer

Thank you very much Michael!

Add comment

Michał Duszak staff answered 2 years ago

2 0 Best answer

@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 2 years ago

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

Add comment

max rioux priority answered 2 years ago

0 0 Best answer

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

Add comment

Michał Duszak staff answered 2 years ago

1 0 Best answer

Try to add this in your styles:

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

Add comment

Write

Create snippet

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.9.0
Device: MACOS
Browser: Chrome
OS: MACOS
Provided sample code: No
Provided link: No

tmdb

60Support score
10Questions 3Answers 0Snippets