The actions dropdown menu not visible in 1-row tables

[iorien]

Steps to reproduce

Create a basic table with just one row. Like this one:

<div class="card">
  <h5 class="card-header">Table Basic</h5>
  <div class="table-responsive text-nowrap">
    <table class="table">
      <thead>
        <tr>
          <th>Project</th>
          <th>Client</th>
          <th>Users</th>
          <th>Status</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody class="table-border-bottom-0">
        <tr>
          <td>
            <i class="fab fa-bootstrap fa-lg text-primary me-3"></i> <strong>Bootstrap Project</strong>
          </td>
          <td>Jerry Milton</td>
          <td>
            <ul class="list-unstyled users-list m-0 avatar-group d-flex align-items-center">
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="" data-bs-original-title="Lilian Fuller">
                <img src="../assets/img/avatars/5.png" alt="Avatar" class="rounded-circle">
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="" data-bs-original-title="Sophia Wilkerson">
                <img src="../assets/img/avatars/6.png" alt="Avatar" class="rounded-circle">
              </li>
              <li data-bs-toggle="tooltip" data-popup="tooltip-custom" data-bs-placement="top" class="avatar avatar-xs pull-up" title="" data-bs-original-title="Christina Parker">
                <img src="../assets/img/avatars/7.png" alt="Avatar" class="rounded-circle">
              </li>
            </ul>
          </td>
          <td><span class="badge bg-label-warning me-1">Pending</span></td>
          <td>
            <div class="dropdown">
              <button type="button" class="btn p-0 dropdown-toggle hide-arrow" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bx bx-dots-vertical-rounded"></i>
              </button>
              <div class="dropdown-menu" style="">
                <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-edit-alt me-2"></i> Edit</a>
                <a class="dropdown-item" href="javascript:void(0);"><i class="bx bx-trash me-2"></i> Delete</a>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

What is expected?

On click the 3 dots menu I expected to see the distinct options:

What is actually happening?

But instead, the menu is hidden by the Overflow property:

Additional data

CSS

[poojadosad]

Hi @iorien,

Thanks for getting in touch with us :)

You are getting it while having a single row in tables. But users always use tables to manage multiple data, So there won't be any issue with multiple records.

If you still want to use it for only one row, you can customize the code for the same.

Let me know if you have any other queries.

[iorien]

Hi @poojadosad It's true, but all tables start with a first row. I think for example in a list of orders, or a list of invoices or delivery notes, ... until the user does not have enough results it will look bad.

[poojadosad]

Hi @iorien,

You can customize the code according to your needs.

For example, you can change the placement of the dropdown or update the z-index value etc.

Let me know if you have any other queries. :)

[iorien]

is not as simple as changing a z-index value...

[poojadosad]

Hi @iorien,

The dropdown issue with the table can be resolved, if you remove .table-responsive class. But then the table will not be responsive.

This issue is with the Bootstrap itself, so we will raise an issue to resolve the bug.

Let me know if you have any other queries :)

[iorien]

yeah, this could be a solution 15 years ago, but today it is not realistic to create a non-responsive web solution.

[poojadosad]

Hi @iorien,

I apologize for the inconvenience. We also understand that it is not a proper solution to the issue.

But here is the solution, If adding a "position-relative" class to the "dropdown" class resolves the issue, you can apply it as code pen example here: https://codepen.io/Pooja-D/pen/rNQNYMo

If you have any further questions, feel free to let me know. :)

[iorien]

you mean position-static right? this way it works correctly. Thank you.