center buttons in the layout (using BULMA)

MelodyNelson

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I'm using datatables with bulma.

I have added buttons in the layout :

layout: {
                top3: 'searchPanes',
                top2: {
                    buttons: [
                            {
                                extend: 'colvisGroup',
                                text: 'Présentation projets',
                                show: '.presentation',
                                hide: '.more'
                            },
                            {
                                extend: 'colvisGroup',
                                text: 'Tout afficher',
                                show: '.more'
                            },
                            {
                                extend: 'colvis',
                                text: 'Colonnes à afficher',
                                postfixButtons: [ 'colvisRestore' ],
                                collectionLayout: 'fixed columns',
                                collectionTitle: '<strong>Colonnes à afficher / masquer</strong>',
                                columns: ':not(.dtr-control, .filtre, .relancer, .ged)'
                            }
                        ]
                },
                top1: function () {
                    let legende = document.createElement('div');
                    legende.innerHTML = '<p class="has-text-centered has-text-grey mb-3">Cliquer sur la ligne ou sur le <span class="mx-1">&#9654;</span> pour afficher des informations complémentaires.</p>';
                    return legende;
                }
            },

This is an extract of the HTML code generated :

<div class="dt-buttons field is-grouped"> 
 <button></button>
 etc
</div>

How can I change some class in the div inside the layout so it can be « Bulma centered buttons » ?

I need it to be written like that :

<div class="dt-buttons buttons is-grouped is-centered"> 

Thank you

allan

Hmmm - I feel that is a bug actually. With 2.1 I had expected that to be centred. I'll look into that and post back with findings.

Until then, this is the property to override.

Allan

MelodyNelson

Thank you Allan

I'm not in 2.1 version yet, still in 2.0 but I will update soon to try the new features

allan

With 2.1 it was actually working, but only for windows larger than around 767px. Smaller than that it would incorrectly pull them to the left. I've committed a fix.

Allan

MelodyNelson

Thanks for the feedback Allan
I will update my version soon

MelodyNelson

Until then, this is the property to override.

It's a newbie question but I don't know how to override this

$.extend(true, DataTable.Buttons.defaults, {
    dom: {
        container: {
            className: 'dt-buttons field is-grouped'
        },

with this kind of « short command » in my own JS file with the default options for DT I want like I did for the search input

DataTable.ext.classes.search.input = "input";

If I can delete « field » for the buttons, the vertical align will be the same in this case

allan

DataTable.Buttons.defaults.dom.container.className = 'dt-buttons is-grouped';

somewhere before you initialise the DataTable.

Allan

MelodyNelson

Thanks Allan, it's obvious when I see it !

Is it a way I can add a class to nav.pagination because Bulma navigation buttons are so big

I did it this way and it doesn't always work

Object.assign(DataTable.defaults, {
    language: { url: 'js/datatables/fr-FR.json'},
    lengthMenu: [5, 10, 25, 50, 100, { label: 'Tout', value: -1 }],
    pageLength: 25,
    caption: '<span class="font85rem has-text-grey">Cliquer sur la ligne ou sur le <span class="mx-1">&#9654;</span> pour afficher des informations complémentaires</span>',
    processing: true,
    layout: {
        topStart: 'pageLength',
        topEnd: {
            search: {
                text: '_INPUT_',
                placeholder: 'Rechercher dans la liste'
            },
        },          
        bottomStart: 'info',
        bottomEnd: 'paging'
    },
    initComplete: function () {
        $('nav.pagination').addClass('is-small');
        $('div.dtsp-panesContainer button').addClass('is-small');
    },
    drawCallback: function (settings) {
        $('nav.pagination').addClass('is-small');
    },
});

I'm changing the datatable JS file (adding is-small) but I would prefer add a change in my own preferences so the original files stay as they are

<nav class="pagination is-small" role="navigation" aria-label="pagination">