`Issue with z-index of sticky column in Bootstrap table`

Question

`Issue with z-index of sticky column in Bootstrap table`

I'm experiencing an issue with my code where the Bootstrap 4 Dropdown appears under the bottom column when open, even though I have assigned a position "sticky" to the first column.

Here is an example:

The CSS code snippet below shows the application of position: sticky; to the first column.

td {
  min-width: 160px;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ff0000;
}

.table-container {
  width: 100%;
  overflow-x: scroll;
}

table {
  width: 200%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="table-container">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th>Column 9</th>
          <th>Column 10</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 1, Column 2</td>
          <td>Row 1, Column 3</td>
          <td>Row 1, Column 4</td>
          <td>Row 1, Column 5</td>
          <td>Row 1, Column 6</td>
          <td>Row 1, Column 7</td>
          <td>Row 1, Column 8</td>
          <td>Row 1, Column 9</td>
          <td>Row 1, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 2, Column 2</td>
          <td>Row 2 Column 3</td>
          <td>Row 2, Column 4</td>
          <td>Row 2, Column 5</td>
          <td>Row 2, Column 6</td>
          <td>Row 2, Column 7</td>
          <td>Row 2, Column 8</td>
          <td>Row 2, Column 9</td>
          <td>Row 2, Column 10</td>
        </tr>
        <tr>
          <td>
            <div class="dropdown">
              <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
              </div>
            </div>
          </td>
          <td>Row 3, Column 2</td>
          <td>Row 3, Column 3</td>
          <td>Row 3, Column 4</td>
          <td>Row 3, Column 5</td>
          <td>Row 3, Column 6</td>
          <td>Row 3, Column 7</td>
          <td>Row 3, Column 8</td>
          <td>Row 3, Column 9</td>
          <td>Row 3, Column 10</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" [email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="04767878736162666464706553716d797173766e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Despite trying to increase the z-index of the drop-down, it seems to be getting ignored.

html css bootstrap-4 z-index sticky

Answer 1

Answer №1

The alignment of sticky elements in this scenario is influenced by the fact that each element creates its own stacking context, and the z-index values are relative to elements within the same stacking context as the first-child td or th.

To address this issue, a workaround involves adjusting the z-index of the first-child td or th element when its dropdown is open. This can be achieved using the :has() pseudo-class:

:first-child:is(th, td):has(.dropdown.show) {
  z-index: 2;
}

However, since :has() is not universally supported in major browsers yet, an alternative approach with JavaScript is suggested. This approach involves detecting an open dropdown and dynamically changing the z-index based on its state:

const observer = new MutationObserver(
  (entries) =>
    entries.forEach(({ target }) => {
      target.closest(':first-child:is(th, td)').style.zIndex =
        target.classList.contains('show') ? '2' : '';
    }),
);

document
  .querySelectorAll('.dropdown')
  .forEach((dropdown) => {
    const thTdFirst = dropdown.closest(':first-child:is(th, td)');
    if (thTdFirst) {
      observer.observe(dropdown, { attributeFilter: ['class'] });
    }
  });

td {
  min-width: 160px;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ff0000;
}

.table-container {
  width: 100%;
  overflow-x: scroll;
}

table {
  width: 200%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="table-container">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th>Column 9</th>
          <th>Column 10</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="dropdown">
                ...Dropdown content...
            </div>
          </td>
          <td>Row 1, Column 2</td>
              ...Other row data...
        </tr>
            ...Additional rows...
      </tbody>
    </table>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

Answer 2

The alignment of sticky elements in this scenario is influenced by the fact that each element creates its own stacking context, and the z-index values are relative to elements within the same stacking context as the first-child td or th.

To address this issue, a workaround involves adjusting the z-index of the first-child td or th element when its dropdown is open. This can be achieved using the :has() pseudo-class:

:first-child:is(th, td):has(.dropdown.show) {
  z-index: 2;
}

However, since :has() is not universally supported in major browsers yet, an alternative approach with JavaScript is suggested. This approach involves detecting an open dropdown and dynamically changing the z-index based on its state:

const observer = new MutationObserver(
  (entries) =>
    entries.forEach(({ target }) => {
      target.closest(':first-child:is(th, td)').style.zIndex =
        target.classList.contains('show') ? '2' : '';
    }),
);

document
  .querySelectorAll('.dropdown')
  .forEach((dropdown) => {
    const thTdFirst = dropdown.closest(':first-child:is(th, td)');
    if (thTdFirst) {
      observer.observe(dropdown, { attributeFilter: ['class'] });
    }
  });

td {
  min-width: 160px;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #ff0000;
}

.table-container {
  width: 100%;
  overflow-x: scroll;
}

table {
  width: 200%;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="table-container">
    <table class="table table-striped table-bordered">
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
          <th>Column 4</th>
          <th>Column 5</th>
          <th>Column 6</th>
          <th>Column 7</th>
          <th>Column 8</th>
          <th>Column 9</th>
          <th>Column 10</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div class="dropdown">
                ...Dropdown content...
            </div>
          </td>
          <td>Row 1, Column 2</td>
              ...Other row data...
        </tr>
            ...Additional rows...
      </tbody>
    </table>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

`Issue with z-index of sticky column in Bootstrap table`

Answer №1

Similar questions

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

Bootstrap dropdown menu fails to expand

Ways to modify the data within a column for every row in a table without relying on props in Vue.js (specifically Element-ui)

Dynamic binding issue causing audio event to not fire

Bring in a php array to populate a dataset in JavaScript

Flex wrap is causing additional space within the layout

Restriction on the number of characters displayed in div elements

Angular's ngClass directive failed to be applied correctly

Guide to positioning a link on the right side of a navigation bar

How can I address multiple buttons with various events using jQuery?

Flexbox does not support sub-columns

What could be causing my browser to not respond to the JavaScript function for clicking?

Sending parameters to ajax using a click event

Customizing the styling of a TextField component in ReactJS using material-ui

Displaying website backgrounds in a digital signage system on a full screen

Adjust the transparency level of the image's mapped area

Is it necessary to define all presentational images in CSS?

Incorporating timed hover effects in React applications

Using MDBootstrap for reactjs, incorporating a modal into a table for enhanced functionality

Integrate CSS and Javascript Plugins into your Ruby on Rails application