Multi-column layout for five columns

sarooptrivedi

How can I saw the five or six column on Multi-Column Layout option. This is working awesome till four colum option. If I use five-column then it will display in one column
https://datatables.net/extensions/buttons/examples/column_visibility/layout.html

     collectionLayout: 'fixed four-column',
                    collectionTitle: 'Initial Count Data table column visibility option',

colin

The styles only go upto "four-column", there isn't a "five-column". You would need to tweak the CSS yourself or modify the code if you wanted that, I'm afraid,

Colin

sarooptrivedi

If you help me to provide the CSS name then I will modify. I am trying to modify some buttons.Bootstrap.css but I am not sure the correct css file need to modify

sarooptrivedi

I did it. Change the CSS . I changed Button.JqueryUi.css and Button.JqueryUI.min.css

 div.dt-button-collection.fixed.five-column {
            margin-left: -375px
        }

    div.dt-button-collection.five-column {
        width: 750px
    }

        div.dt-button-collection.five-column > :last-child {
            padding-bottom: 1px;
            column-count: 5
        }
div.dt-button-collection.two-column > :last-child, div.dt-button-collection.three-column > :last-child, div.dt-button-collection.four-column > :last-child, div.dt-button-collection.five-column > :last-child {
    display: block !important;
    -webkit-column-gap: 8px;
    -moz-column-gap: 8px;
    -ms-column-gap: 8px;
    -o-column-gap: 8px;
    column-gap: 8px
}

    div.dt-button-collection.two-column > :last-child > *, div.dt-button-collection.three-column > :last-child > *, div.dt-button-collection.four-column > :last-child > *,, div.dt-button-collection.five-column > :last-child > * {
        -webkit-column-break-inside: avoid;
        break-inside: avoid
    }

colin

Yep, that's it! Thanks for posting,

Colin

sarooptrivedi

If you have plan to use bootstrap then same change in bootstrap css