center buttons in the layout (using BULMA)

MelodyNelson · July 21

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 · July 22

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 · July 22

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 · July 23

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 · July 23

Thanks for the feedback Allan
I will update my version soon

MelodyNelson · August 14

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 · August 15

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

somewhere before you initialise the DataTable.

Allan

MelodyNelson · August 15

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">

center buttons in the layout (using BULMA)

center buttons in the layout (using BULMA)

Replies

Howdy, Stranger!

Categories

DataTables

center buttons in the layout (using BULMA)

center buttons in the layout (using BULMA)

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables