Inconsistency with language options accepting or not HTML

igorsantos07

Link to test case: don't think it's needed? See example settings below

Description of problem:
The issue is simple: it's not clear from docs which language fields accept HTML and which don't - sometimes, it's inconsistent even inside the same plugin. This is specially useful when you want to include font icons in some buttons, like the ones (which are already "icon-only") from the SearchBuilder. For instance:

language: {
    searchBuilder : {
        title: { //here HTML works great
            0: '<b>Query Builder</b> <em class="note">(no constraints)</em>',
            1: '<b>Query Builder</b> <em>(one constraint)</em>' ,
            _: '<b>Query Builder</b> <em>(%d constraints)</em>'
        },
        left: '<i class="fa fa-outdent"></i>', //won't work
        right: '<i class="fa fa-indent"></i>', //won't work
        delete: '<i class="fa fa-trash"></i>', //works, even if it's just the button next to the left/right ones
        clearAll: '<i class="fa fa-trash"></i> Remove all', //also works
    },
    searchPanes   : { //searchPanes DOESN'T support any HTML here, which is consistent in itself but not with searchBuilder...
        loadMessage    : 'Crunching data for the filter panes...',
        showMessage    : 'Open panels',
        collapseMessage: 'Close panels',
        clearMessage   : 'Clear filters',
        title: { //again, I can't set the "none active" to a lighter font since HTML is not allowed here, and to keep the same style I achieved with the SearchBuilder title, I had to resort to CSS content......
            0: '(none active)',
            1: '(one active)',
            _: '(%d active)'
        }
    },
}

igorsantos07

Fun fact: I spent more than an hour trying to debug why the heck the tab freezes (both in Chrome and Firefox) when I try to set the needed icons using CSS (e.g. .dtsb-left:before { font-family: FontAwesome; content: '\f03c'; }. That worked great in some other buttons needing icons, but in this scenario all I can do is kill the tab and try again... And I can't reproduce this on live.datatables.net either, it works great both with the exact build code I'm using, v1.13 or nightly version from the CDN. Lastly, it also works fine if I edit the CSS via DevTools.
Setting language.searchBuilder.left (or right) to empty also freezes the tab as soon as builder is supposed to show (either after loading ajax data or, long after it, when I click a button that does a slideToggle on its div).

igorsantos07

And the plot thickens...............

language.searchBuilder.add also doesn't accept HTML; however, adding the icon via CSS works as expected, differently from the indent/outdent options as described in the previous comment.

sandy

Hi @igorsantos07 ,

Thanks for pointing this out. We agree they should be consistent and all allow html, apart from those where the value can be affected by user input - for example StateRestore button texts that display an identifier. I've raised an issue internally (DD-2437 for my reference) and will report back here when there is an update.

Thanks,
Sandy

sandy

Hi @igorsantos07 ,

That should be the issue fixed now as you can see at this example.

This will be available in the next SearchPanes and SearchBuilder releases which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds here and here.

Thanks,
Sandy