DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

**Btn clovis scrollable**

**Btn clovis scrollable**

FragosoFragoso Posts: 7Questions: 1Answers: 0
in Free community support

I have a table with many columns and when I use btn colvis this happens:


I would like to know how to make it scrollable ^^

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,122Questions: 1Answers: 10,397 Site admin 
    div.dt-button-collection {
  max-height: 50vh;
  overflow: auto;
}

    Allan

  • FragosoFragoso Posts: 7Questions: 1Answers: 0

    Before continuing, I would like to thank you for your help Allan ^^

    But that didn't work. It looked like this:

  • allanallan Posts: 63,122Questions: 1Answers: 10,397 Site admin

    Could you link to your page please? It seemed to work just fine for me locally.

    Allan

  • FragosoFragoso Posts: 7Questions: 1Answers: 0
    edited January 2023

    How would I do it? I send you the HTML?

    The application is local

    I am using codeigniter 4 framework

  • kthorngrenkthorngren Posts: 21,129Questions: 26Answers: 4,916

    Post a link to your page or create a test case that replicates the issue.
    https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

    Kevin

  • kthorngrenkthorngren Posts: 21,129Questions: 26Answers: 4,916

    I had time to create a starter test case for you:
    http://live.datatables.net/rebejasu/1/edit

    Looks like you are using a flavor of Bootstrap so I used the Download Builder to get the correct files for Bootstrap 4. Please update the test case to show the issue you are having.

    Kevin

  • FragosoFragoso Posts: 7Questions: 1Answers: 0
    edited January 2023

    Thanks for the help Kevin, but I can't access the site because of too many redirects(?)

    I tried several times to send the link here, but every time the link went to a review (?)

  • kthorngrenkthorngren Posts: 21,129Questions: 26Answers: 4,916

    but I can't access the site because of too many redirects(?)

    Sounds like your browser is trying to use SSL and changing the URL from HTTP:// to HTTPS://. Try a different browser that will allow for using HTTP://

    but every time the link went to a review (?)

    Allan will need to look at that. You can PM him the link directly using the Ask a Private Question.

    The problem will be a styling issue not a Datatables config issue.

    Kevin

  • allanallan Posts: 63,122Questions: 1Answers: 10,397 Site admin

    Here's Kevin's example on JSFiddle: https://jsfiddle.net/9vpkcx85/ .

    Allan

  • FragosoFragoso Posts: 7Questions: 1Answers: 0

    https://replit.com/join/pvjhvvlkyb-fragosogelog

  • allanallan Posts: 63,122Questions: 1Answers: 10,397 Site admin

    I've approved your post now - it was being caught by the spam filter (since it was just a link). It gives me a login screen.

    Allan

  • FragosoFragoso Posts: 7Questions: 1Answers: 0

    In my code this didn't work.

    Here's my code along with everything I'm using in the imports:

    <!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/jszip-2.5.0/dt-1.13.1/b-2.3.3/b-html5-2.3.3/b-print-2.3.3/datatables.min.css"/>
        <link rel="stylesheet" type="text/css" href="/scss/index.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jqc-1.12.4/jszip-2.5.0/dt-1.13.1/af-2.5.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/b-print-2.3.3/cr-1.6.1/date-1.2.0/fc-4.2.1/fh-3.3.1/kt-2.8.0/r-2.4.0/rg-1.3.0/rr-1.3.1/sc-2.0.7/sb-1.4.0/sp-2.1.0/sl-1.5.0/sr-1.2.0/datatables.min.css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
        <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jqc-1.12.4/jszip-2.5.0/dt-1.13.1/af-2.5.1/b-2.3.3/b-colvis-2.3.3/b-html5-2.3.3/b-print-2.3.3/cr-1.6.1/date-1.2.0/fc-4.2.1/fh-3.3.1/kt-2.8.0/r-2.4.0/rg-1.3.0/rr-1.3.1/sc-2.0.7/sb-1.4.0/sp-2.1.0/sl-1.5.0/sr-1.2.0/datatables.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.13.4/jquery.mask.min.js"></script>
        <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
        <script src="https://npmcdn.com/flatpickr@4.6.13/dist/l10n/pt.js"></script>

        <style>

            div.dt-button-collection {
                max-height: 10vh;
                overflow: auto;
            }

        </style>
    
    </head>

    <body style="height: 100vh; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;">
        
        <div style="height: 85vh; width: 70%; border: solid 1px red; overflow: auto;">
            <table id="table">
                <thead>
                    <th class="dt-center">Ações</th>
                    <th class="dt-center">Nº Prog</th>
                    <th class="dt-center">Classificação</th>
                    <th class="dt-center">Tipo de Operação</th>
                    <th class="dt-center">Origem do Processo</th>
                    <th class="dt-center">Cliente</th>
                    <th class="dt-center">Cidade Cliente</th>
                    <th class="dt-center">Referência Cliente</th>
                    <th class="dt-center">Data de Embarque</th>
                    <th class="dt-center">Armador</th>
                    <th class="dt-center">Proprietário / Leasing</th>
                    <th class="dt-center">Número do BL</th>
                    <th class="dt-center">Navio</th>
                    <th class="dt-center">Viagem</th>
                    <th class="dt-center">Referência Despachante</th>
                    <th class="dt-center">Produto</th>
                    <th class="dt-center">Porto de Coleta</th>
                    <th class="dt-center">Porto de Entrega</th>
                    <th class="dt-center">Previsão de Atracação</th>
                    <th class="dt-center">Atração Efetiva</th>
                    <th class="dt-center">Terminal de Atracação</th>
                    <th class="dt-center">Transferência de Terminal</th>
                    <th class="dt-center">Novo Terminal</th>
                    <th class="dt-center">Data Entrada Novo Terminal</th>
                    <th class="dt-center">Vencimento da Armazenagem</th>
                    <th class="dt-center">Vencimento da Demurrage</th>
                    <th class="dt-center">Número DI/DTA</th>
                    <th class="dt-center">Data da Presença de Carga</th>
                    <th class="dt-center">Data do Registro da DI</th>
                    <th class="dt-center">Data do Desembaraço</th>
                    <th class="dt-center">Data Liberação Documentos 3PL</th>
                    <th class="dt-center">Despachante</th>
                    <th class="dt-center">Fornecedor 1</th>
                    <th class="dt-center">Fornecedor 2</th>
                    <th class="dt-center">Fornecedor 3</th>
                    <th class="dt-center">Observação</th>
                    <th class="dt-center">Criado em</th>
                    <th class="dt-center">Atualizado em</th>
                </thead>
    
                <tbody>
                </tbody>
            </table>
        </div>

        <script>

            $(document).ready(function() {
                $('#table').DataTable( {
                    dom: 'Bfrt',
                    buttons: [
                        {extend: 'copy', title: 'Movimentos', className: 'btn', text: 'Copiar'},
                        {extend: 'csv', title: 'Movimentos', className: 'btn'},
                        {extend: 'excel', title: 'Movimentos', className: 'btn'},
                        {extend: 'pdf', title: 'Movimentos', className: 'btn'},
                        {extend: 'print', title: 'Movimentos', className: 'btn', text: 'Imprimir'},
                        {extend: 'colvis', title: 'Movimentos', className: 'btn', text: 'Colunas'}
                    ],
                    "oLanguage": {"sSearch": "Pesquisar.. "},
                    scrollCollapse: true,
                    "scrollX": true,
                    "scrollY": "62vh",
                    select: true
                });
            });

        </script>

    </body>
</html>
  • kthorngrenkthorngren Posts: 21,129Questions: 26Answers: 4,916
    Answer ✓

    I placed you code into this fiddle:
    https://jsfiddle.net/tpjwLbze/

    If you inspect the div.dt-button-collection element you will find this is overriding the style you added:

    div.dt-button-collection {
    overflow: visible !important;
    z-index: 2002 !important;
}

    So I added !important here and it works:
    https://jsfiddle.net/tpjwLbze/1/

    Kevin

  • FragosoFragoso Posts: 7Questions: 1Answers: 0

    Allan and Kevin, thank you so much. I'm starting programming and you helped me a lot!

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.