Toggle Buttons Width (Bootstrap4 styling)

vol7ron

I have a Bootstrap4 DataTable that includes a popover in the table header. When using colVis, the popup menu expands very wide (the width of the data-content for the popover). Is there an easy way to address this?

Don't hold me to this, but I know I've gotten around this in older versions of DataTables (with separate colVis extension as opposed to Buttons). I'm not sure if that's due to it being an older version or because here I'm attempting to use Bootstrap4 styling on the buttons.

Here's an example:
http://live.datatables.net/lujuvuwu/1/

Just click on the "More Columns" button and notice how (1) the font-awesome icon has been stripped and (2) the data-content has been insterted. Also notice that the container expands its width (becomes extremely wide). Hoping there's an "html" option I can enable for the text.

Note: my real world application has many many columns, so I'd prefer not to hand type the "text" value (as seen here: https://datatables.net/extensions/buttons/examples/styling/icons).

Thanks

allan

A quick workaround is to use:

div.dt-button-collection.dropdown-menu {
  max-width: 10em;
}

.dt-button {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

http://live.datatables.net/lujuvuwu/2/edit

The problem is the HTML in the attribute. Our HTML stripping isn't smart enough to handle that, which is something we need to address.

Allan

vol7ron

@allan Thank you for the quick reply -- that allows me to start looking into workarounds. One of which is the ellipsis, or perhaps there is a way I can hook into the Button-menu render process.

In older versions of DataTables, at least with the default colVis extension that contained checkboxes (default styling), I believe it was able to render the icon and attributes containing HTML correctly. Is there any way to quickly test this?

In addition to that, is there any way to use a Bootstrap4 theme for DataTables, but use the default theme for Buttons (specifically colVis)? That might be the best workaround. Also, the checkboxes seem to be better UX design