Dropdown menus with different size labels: how do I align them?

March 24, 2023

My goal is to align all dropdown menus. However, the dropdown menus are not aligned due to varying label text. As an example (from my code below) because the label "Position Test 1" has a longer text, the dropdown menu does not align with "Name" dropdown.

Is there a way to align them regardless of the label text? See expected Result screenshot here –

Here is my code.

$(document).ready(function() {
  $('#table-wrap').hide();
  var table = $('#example').DataTable({

    responsive: true,
    mark: true,
    stateSave: false,
    searching: true
  });

  buildSelect(table);
  $('#table-filter').on('change', function() {
    // show the tbody when the user clicks on a filter option
    $('#table-wrap').show();
    table.columns.adjust();

    table.search(this.value).draw();
  });


  table.on('draw', function() {
    buildSelect(table);
  });
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
    $('#table-wrap').hide();
  });
  selectDisable();
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
      select.append('<option value="' + d + '">' + d + '</option>');

    });

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
      // Use RegEx to find the selected value from the unique values of the column.
      // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}

$(document).on('change', '#dd1', function() {
  $('#dd2, #dd3').prop("disabled", false);
})

$(document).on('click', '#test', function() {
  selectDisable();
})

function selectDisable() {
  $('#dd2, #dd3').prop("disabled", true);
}

select {
    width: 30%;
}

.form-group {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<!DOCTYPE html>
<html>

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

  <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>
<div class="searchbox" select id="table-filter">
<div class="form-group">
  <p><label for="dd1">Name:</label> <span id="dropdown1" input type="checkbox">
</span>
  </p>

  <p><label for="dd2">Postion Test1:</label> <span id="dropdown2">
</span>
  </p>

  <p><label for="dd3">Office:</label> <span id="dropdown3">
</span>
  </p></div>
  <button type="button" id="test">Clear Filters</button>
</div>
<div id="table-wrap">
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
    <thead>
      <tr>

        <th>&#160;</th>
        <th>&#160;</th>
        <th>&#160;</th>
        <th colspan="3" style=" text-align: center;">Information</th>
      </tr>


      <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
      </tr>
    </thead>


    <tbody>
      <tr>
        <td>ID.AI</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120</td>
      </tr>
      <tr>
        <td>Garrett -2</td>
        <td>Director</td>
        <td>Edinburgh</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$5,300</td>
      </tr>
      <tr>
        <td>Ashton.1 -2</td>
        <td>Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$4,800</td>
      </tr>


    </tbody>
  </table>
</div>

>Solution :

Do you mean something like this?

    $(document).ready(function() {
      $('#table-wrap').hide();
      var table = $('#example').DataTable({

        responsive: true,
        mark: true,
        stateSave: false,
        searching: true
      });

      buildSelect(table);
      $('#table-filter').on('change', function() {
        // show the tbody when the user clicks on a filter option
        $('#table-wrap').show();
        table.columns.adjust();

        table.search(this.value).draw();
      });


      table.on('draw', function() {
        buildSelect(table);
      });
      $('#test').on('click', function() {
        table.search('').columns().search('').draw();
        $('#table-wrap').hide();
      });
      selectDisable();
    });

    function buildSelect(table) {
      var counter = 0;
      table.columns([0, 1, 2]).every(function() {
        var column = table.column(this, {
          search: 'applied'
        });
        counter++;
        var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')
          .appendTo($('#dropdown' + counter).empty())
          .on('change', function() {
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val()
            );

            column
              .search(val ? '^' + val + '$' : '', true, false)
              .draw();
          });

        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>');

        });

        // The rebuild will clear the exisiting select, so it needs to be repopulated
        var currSearch = column.search();
        if (currSearch) {
          // Use RegEx to find the selected value from the unique values of the column.
          // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
          select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
        }
      });
    }

    $(document).on('change', '#dd1', function() {
      $('#dd2, #dd3').prop("disabled", false);
    })

    $(document).on('click', '#test', function() {
      selectDisable();
    })

    function selectDisable() {
      $('#dd2, #dd3').prop("disabled", true);
    }

    .form-group {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    p {
        display: flex;
        width: 40%;
    }

    label {
        display: flex;
        flex: 1;
    }

    span, select {
        display: flex;
        flex: 1;
    }

    <!DOCTYPE html>
    <html>

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

      <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
      <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

      <meta charset=utf-8 />
      <title>DataTables - JS Bin</title>
    </head>
    <div class="searchbox" select id="table-filter">
    <div class="form-group">
      <p><label for="dd1">Name:</label> <span id="dropdown1" input type="checkbox">
    </span>
      </p>

      <p><label for="dd2">Postion Test1:</label> <span id="dropdown2">
    </span>
      </p>

      <p><label for="dd3">Office:</label> <span id="dropdown3">
    </span>
      </p></div>
      <button type="button" id="test">Clear Filters</button>
    </div>
    <div id="table-wrap">
      <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
        <thead>
          <tr>

            <th>&#160;</th>
            <th>&#160;</th>
            <th>&#160;</th>
            <th colspan="3" style=" text-align: center;">Information</th>
          </tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>


        <tbody>
          <tr>
            <td>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
        </tbody>
      </table>
    </div>