带有不同尺寸标签的下拉菜单:如何对齐它们?

问题描述 投票:0回答:2

我的目标是对齐所有下拉菜单。但是,由于标签文本不同,下拉菜单未对齐。例如(来自我下面的代码)因为标签“位置测试 1”的文本较长,下拉菜单与“名称”下拉菜单不对齐。

有没有办法不管标签文本如何对齐它们?在此处查看预期结果屏幕截图 -

这是我的代码。

$(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>

html css
2个回答
1
投票

你的意思是这样的吗?

    $(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>


0
投票

最简单的解决方法是为标签元素添加宽度或最小宽度,确保它与最长的标签一样宽。 WebPrograme 使用

flex
发布的另一个修复是更好的修复。 :)

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

© www.soinside.com 2019 - 2024. All rights reserved.