Bootstrap 5 and DataTables 1.12.0, buttons collection text overflow.

ikharus

I have a table with a custom collection button that was showing fine using DataTable 1.11.3.

Now using DataTable 1.12.0, the drop-down area width seems to be fixed to 218px.

Here's a link thats shows the problem:
live.datatables.net/duliqoqi/4/edit?html,js,output

The problem seems to be more in the Buttons v2.2.3 extension version than in DataTables.

Adding this to my css fixed the problem:

div.dt-button-collection {
  width: auto;
}

Since it overrides the original property from the buttons.bootstrap5.css file. Note that my previous version was working fine using DataTables 1.11.3, which was bundled with Button v2.1.0 (there's no width: 218px in the div.dt-button-collection section of the css in that version).

Is there another way to fix this on my end instead of overriding the css? Am I missing something?

Thanks!!

allan

The intention had actually been to have such strings not overflow, but rather show an ellipsis display: http://live.datatables.net/duliqoqi/6/edit . Looks like I missed that - sorry. I've committed a fix here.

If you want it to expand to match the text though, then yes you'd need to add a CSS rule to your page such as that one.

The reason for this is the new auto layout for the columns - it didn't work at all without a specific width being assigned.

Allan

ikharus

Thanks for the explanation!