Cannot set vertical align on checkboxes on jQuery DataTable's Select Extension

user_11054401 0
Viewed 573

After I inspect the element, I notice it uses position: absolute and it's problematic for vertical-align: middle . I've set the top property but it screws up the checkboxes layout. I desperately want the checkboxes to be vertically aligned. How do I do it?

------------------------------------------------------------------------------------------------------------------- This is for dealing with "your post mostly code"------------------------------------------------------------------------------------------------------------------------

const datatableOptions = {
        scrollY: "400px",
        scrollCollapse: true,
        paging: false,
        bSort: false,
        select: {
          style: "multi",
          selector: "td:first-child"
        }
      };

      var table = $("#my-table").DataTable({
        ajax: `https://api.npoint.io/063840afed3ad2456820`,
        columns: [
          { data: null, defaultContent: "" },
          { data: "id" },
          { data: "source" },
          { data: "target" }
        ],
        columnDefs: [
          {
            className: "select-checkbox align-middle",
            targets: 0
          },
          {
            targets: 1,
            className: "align-middle"
          },
          {
            targets: 2,
            className: "align-middle"
          },
          {
            targets: 3,
            className: "align-middle"
          }
        ],
        ...datatableOptions
      });
table tbody tr td {
        padding: 20px !important;
      }

      .align-middle {
        vertical-align: middle !important;
      }
<link href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.24/sl-1.3.3/datatables.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.24/sl-1.3.3/datatables.min.js"></script>

<table
      id="my-table"
      class="table table-striped table-hover mt-5"
      style="width: 100%;"
    >
      <thead>
        <tr>
          <th></th>
          <th>ID</th>
          <th>Source</th>
          <th>Target</th>
        </tr>
      </thead>
    </table>

datatables jquery
1 Answers

You can use this to adjust the position:

.select-checkbox::before{
  top: 48% !important
}


const datatableOptions = {
  scrollY: "400px",
  scrollCollapse: true,
  paging: false,
  bSort: false,
  select: {
    style: "multi",
    selector: "td:first-child"
  }
};

var table = $("#my-table").DataTable({
  ajax: `https://api.npoint.io/063840afed3ad2456820`,
  columns: [{
      data: null,
      defaultContent: ""
    },
    {
      data: "id"
    },
    {
      data: "source"
    },
    {
      data: "target"
    }
  ],
  columnDefs: [{
      className: "select-checkbox align-middle",
      targets: 0
    },
    {
      targets: 1,
      className: "align-middle"
    },
    {
      targets: 2,
      className: "align-middle"
    },
    {
      targets: 3,
      className: "align-middle"
    }
  ],
  ...datatableOptions
});
table tbody tr td {
  padding: 20px !important;
}

.select-checkbox::before{
  top: 48% !important;
}
<link href="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.24/sl-1.3.3/datatables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jq-3.3.1/dt-1.10.24/sl-1.3.3/datatables.min.js"></script>

<table id="my-table" class="table table-striped table-hover mt-5" style="width: 100%;">
  <thead>
    <tr>
      <th></th>
      <th>ID</th>
      <th>Source</th>
      <th>Target</th>
    </tr>
  </thead>
</table>

user_71589590
Related