Centered my filter using layout, now I have two filters. How to remove the second one?

meowcat

While trying to center my filter bar, which I managed using layout, I found that there are now two. I tried disabling search, but that just makes both of them disappear. I tried searching for something in my CSS/JS that might be creating the extra one at the top right, but I'm not seeing anything. My code is below, and the second filter bar showed up after adding "layout". May I get some help figuring out how to prevent this second filter? Thank you

<script type="text/javascript">
$(document).ready(function(){
 // Initialize the DataTable
  var table = $('#example').DataTable({
    columns: [
      { className: 'dt-control', orderable: false, data: null, defaultContent: '' },
    ],
    columnDefs: [
      {
        targets: 1,
        width: '5'
      },
      {
        targets: 2,
        width: '45%'
      },
      {
        targets: 3,
        width: '35%'
      },
      {
        targets: 4,
        width: '5'
      },
      // Controls alignment of contents of the cells
      {
        targets: '_all',
        className: 'dt-head-center'
      },
      {
        targets:[1,2,3,4,5],
        className: 'dt-body-left'
      },
      {
        targets: [6,7],
        className: 'dt-body-right'
      },
    ],
    layout: {
        top: {
          'search':{
            placeholder: 'Enter a Detail to filter by'
          }
        }
    },
    "oLanguage": {
      "sSearch": "Criteria Filter"
    },
  });
</script>

<style>
/* Image for the icons for the child-row expand button */
td.dt-control {
  background: url('resources/details_open.png') no-repeat center center;
  cursor: pointer;
}
tr.shown td.dt-control {
  background: url('resources/details_close.png') no-repeat center center;
}
table.dataTable thead tr {
  background-color: orange;
}
/* Table header alignment */
thead, th {
  text-align: center;
}
</style>

kthorngren

Take a look at the layout docs. The Default section shows the default layout and how to remove the elements from their default positions.

Kevin

meowcat

I should've read more closely, that did the trick! Thank you kthorn!