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

NewUser
March 24, 2023
162 views
1 vote
2 Answers

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> </th>
        <th> </th>
        <th> </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>

Tags: css html

Answers

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>

The easiest fix is to add width or min width to your label elements, making sure it is as wide as your longest label. The other fix posted by WebPrograme using flex is a better fix. 🙂

    .form-group > p > label {
      display: inline-block;
      min-width: 120px;
    }

$(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;
}
.form-group > p > label {
  display: inline-block;
  min-width: 120px;
}

<!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>

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers