Multi-column layout for five columns

Multi-column layout for five columns

sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2
edited March 2022 in ColVis

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',

Replies

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    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

  • sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

    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

  • sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

    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
        }
    
  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    Yep, that's it! Thanks for posting,

    Colin

  • sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

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

Sign In or Register to comment.