Export excel button not displaying and trying to get div.dt-buttons to wrap on mobile

crcucb

I have two issues with https://jyorkejudge.org/a_test.php

I started off trying to get the excelHtml5 button to show , code is below. the csvHtml5 button shows and works but the csvHtml5 button doesn't.

I tried to use the download builder again, making sure I selected Buttons, HTML5 Export and JSZip.

After I did this, the row of buttons changed on my mobile phone. Previously, on my phone, the buttons would wrap to multiple rows. I don't recall doing anything to get it to display this way, but I liked it. I'm including two screenshots from my mobile phone to show how the row of buttons is extending past everything else. Now I can't seem to get them to wrap.

    layout: {
      topStart: {
        buttons: [
          {
            extend: 'edit',
            editor: addresseditor,
            text: 'Edit Address',
            formButtons: [
                        {
                            text: 'Cancel',
                            action: function () {
                                this.close();
                            }
                        },
                        'Update'
                    ]
            
          },
          // 'searchPanes'
          'searchBuilder', 'pageLength','colvis', 'createState', 'savedStates','csvHtml5', 'csvHtml5'
        ]
      },

kthorngren

It doesn't look like you included JSZip which is required for the Excel export button. See the excelHtml5 docs for details. Open the link you have for datatables.min.js In the file you will see a URL to upgrade. Paste that URL into your browser and add JSZip. Adding this should display the Excel export button.

BTW you need to make sure the triple back ticks are on separate lines and don't have leading spaces for Markdown to work correctly. I updated your post to fix this.

Kevin

crcucb

Thank you.

Now,.any idea how to wrap the buttons on a movile device?

kthorngren

Looks like you have duplicate Datatables CSS and JS inclusions:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>

<link href="css/datatables.min.css" rel="stylesheet">
 
        
        
    
            <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.29.4/dt-2.3.2/b-3.2.4/date-1.5.6/sl-3.0.1/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.29.4/dt-2.3.2/b-3.2.4/date-1.5.6/sl-3.0.1/datatables.min.js"></script>
    
    
    <script src="js/datatables.min.js"></script>

  
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>

Lines 4 and 16 go together. Lines 9 and 13 look like duplicates of 4 and 16. Choose one or the other to use and remove the duplicates. This is possibly causing styling conflicts and will likely cause other issues.

Does removing the duplicate includes solve the problem with the buttons?

Kevin

kthorngren

Also open js/datatables.min.js to see what is included in the file. It has PDFMake. You should remove lines 1 and 2 of the above code snippet to keep from loading PDFMake twice.

Kevin

crcucb

Thank you, I was able to clean up the js and css. I still cannot figure out a way to get the row of buttons in "dt-buttons" or "dt-layout-cell dt-layout-start" to wrap

kthorngren

Your test case has some errors and doesn't run. I didn't see anything obvious when I looked earlier. This test case, with the default DT styling, shows the buttons are responsive by default.
https://live.datatables.net/muyoqohi/1/edit

There must something on your page affecting the behavior. @allan will probably need to look.

I noticed you have this:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

You should remove this because you are loading jquery.js in this:

<script src="js/datatables.min.js"></script>

Here are the included libraries:

 * Included libraries:
 *   jQuery 3.7.0, JSZip 3.10.1, pdfmake 0.2.7, DataTables 2.3.2, Editor 2.4.3, Buttons 3.2.4, Column visibility 3.2.4, HTML5 export 3.2.4, Print view 3.2.4, ColReorder 2.1.1, ColumnControl 1.0.7, DateTime 1.5.6, FixedColumns 5.0.4, FixedHeader 4.0.3, Responsive 3.0.5, Scroller 2.4.3, SearchBuilder 1.8.3, SearchPanes 2.3.4, Select 3.0.1, StateRestore 1.4.1

Kevin

kthorngren

I may have found the problem. Inspecting this div:

<div class="container" width="95%">

There is this CSS applied by navbar.css:

.container {
    display: flex;
    flex-wrap: wrap;
}

Removing display: flex;. seems to fix the issue. Before removing display: flex; pic:

Unchecking display: flex; results in this display:

Notice horizontal scrolling is now working and the buttons are responsive. The Datatables container is staying within the width of the page.

Not sure the best way to handle this but maybe you can change the CSS selector used for the navbar container to make that CSS only apply to the navbar. You might need to refer to the navbar's docs.

Kevin