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

Editor window, buttons and other dom elements hidden behind bootstrap menu.

Editor window, buttons and other dom elements hidden behind bootstrap menu.

th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1
in General

I have a bootstrap menu and the dom elements are hidden under it. Also when I click "New" the editor window is partialy hidden also. Been struggling with this for hours and can't seem to find an answer.

This question has an accepted answers - jump to answer

Answers

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Here is the code for the page...

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>OESA CMS Order Numbers</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="fontawesome5/web-fonts-with-css/css/fontawesome-all.min.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="css/buttons.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="css/select.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">










    <style>
    td.styled_table {
    font-family: Helvetica;
    color: grey;
    }
    </style>
    </head>
    <body>

        Welcome test@chp.ca.gov    
     
     
     
     
     
     
     
    var editor; // use a global for the submit and return data rendering in the examples $(document).ready(function() { editor = new $.fn.dataTable.Editor( { ajax: "order_numbers-con.php", table: "#order_numbers", fields: [ { label: "Location:", name: "location" } ] } ); $('#order_numbers').DataTable( { dom: '<"top"flpBi>rt<"bottom">p<"clear">', // dom: "Blfrtip", ajax: "order_numbers-con.php", columns: [ { data: "id" }, { data: "location" } ], fixedHeader: { header: true, footer: true }, select: true, stateSave: true, 'aLengthMenu': [[10, 25, 50, -1], [10, 25, 50, 'All']], 'iDisplayLength': 50, buttons: [ { extend: 'create', editor: editor }, { extend: 'edit', editor: editor }, { extend: 'remove', editor: editor }, { text: 'Reload', action: function ( e, dt, node, config ) {dt.ajax.reload();}}, { extend: 'pdfHtml5', orientation: 'portrait', filename: 'OESA Order Numbers' }, { extend: 'copyHtml5', exportOptions: { orthogonal: 'export' } }, { extend: 'excelHtml5', filename: 'OESA Order Numbers' }, { extend: 'csvHtml5', filename: 'OESA Order Numbers' }, 'colvis', 'print' ] } ); } );
    Order Number Location
    Order Number Location

    </body>
    </html>

  • Bindrid2Bindrid2 Posts: 79Questions: 4Answers: 12

    did you look at the z index of each? You might have to adjust it for this situation, and/or move it down a hair

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    What is the z index and how would i change it?

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    https://css-tricks.com/almanac/properties/z/z-index/ will explain

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Great link and it did move the buttons, etc. down but now the datatable is covering the dom objects. I've tried using headeroffset but it doesn't do anything. I'm probably using it wrong or my understanding of what it does is wrong. I thought headeroffset would move the header of the datatable down. Is that right?

    What I'm trying is ...

        fixedHeader: {
  headerOffset: 50,
      header: true,
      footer: true
    },
      etc...
  • allanallan Posts: 63,680Questions: 1Answers: 10,498 Site admin

    Could you give us a link to the page showing the issue so we can debug it directly?

    Thanks,
    Allan

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Ok. https://jsfiddle.net/vun7y6sk/3/

  • allanallan Posts: 63,680Questions: 1Answers: 10,498 Site admin

    Thanks - however, I'm getting a lot of 404 errors there. Most of the imports are relative and they are being loaded from JSFiddle, which doesn't have those resources.

    Are you able to give me a link to a running page that shows the issue you are seeing please?

    Allan

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1
    edited July 2018

    [login details revoked]

    Not all the links work yet. I am still working on the site. The first half of links under "Lookup Data" currently work. Also as a work around I added a table with no data to move the buttons and such down. If you load chp_area_offices-db.php you will see the problem. I commented out the table on this one page to show the problem.

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    I found the problem. It was the css and js I was using. Had some in the wrong order and others were old.

  • allanallan Posts: 63,680Questions: 1Answers: 10,498 Site admin
    Answer ✓

    Super - thanks for posting back to let me know!

    I've removed the login details from the post above now.

    Allan

  • th3t1ckth3t1ck Posts: 228Questions: 37Answers: 1

    Thank you for removing those.

This discussion has been closed.

DataTables

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