center buttons in the layout (using BULMA)

center buttons in the layout (using BULMA)

MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

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

Replies

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    Thanks for the feedback Allan
    I will update my version soon

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2
    edited 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

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin
    DataTable.Buttons.defaults.dom.container.className = 'dt-buttons is-grouped';
    

    somewhere before you initialise the DataTable.

    Allan

  • MelodyNelsonMelodyNelson Posts: 213Questions: 33Answers: 2

    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">
    
Sign In or Register to comment.