CODEWITHSUNDEEP
htmlcss
Juned Ansari
Juned Ansari

Reputation: 5275

z-index not working in jquery data table

I am Unable to Display Action Box As a Upper Layer, I tried z-index too but no change.

enter image description here

$(document).ready(function () {
                                
                                $('#dataTables-example').DataTable({
                                    "scrollX": true,
                                    "bSort": false,
                                    aLengthMenu: [
                                        [10, 25, 50, 100, 200, -1],
                                        [10, 25, 50, 100, 200, "All"]
                                    ],
                                    iDisplayLength: 10
                                });
                                
                            });
.btn-group {
  position: relative;
}

ul.dropdown-menu.pull-right {
  position: absolute;
  top: 0;
  left: -160px;
  width: 160px;
  z-index:99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example" style="z-index:1">

  <thead>
    <tr>
      <th>Sr.No</th>
      <th>LeadCreated DateTime</th>
      <th>RetailerName</th>
      <th>ShopName</th>
      <th>Mobile</th>
      <th>Address</th>
      <th>City</th>
      <th>Pincode</th>
      <th>Status</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>

    <tr class="odd gradeX">
      <td>1</td>
      <td>10-10-2017</td>
      <td>Test</td>
      <td>Test</td>
      <td>9904773479</td>
      <td>Surat</td>
      <td>Surat</td>
      <td>304230</td>
      <td style="background: <?php if ($row->Status == 'InProcess') echo 'green';if ($row->Status == 'Closed') echo 'orange';if ($row->Status == 'Dead') echo 'black'; ?>;color: #FFFFFF">
        <?= $row->Status ?>
      </td>
      <td class="pbutton">
        <div class="btn-group">
          <!-- Button trigger modal -->
          <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                                                                Action <span class="caret"></span>
                                                            </button>
          <ul class="dropdown-menu pull-right " role="menu">
            <li><a href="#viewleadmodal" data-id="<?= $row->LeadId ?>" data-toggle="modal" data-target="#viewleadmodal"><span class="glyphicon glyphicon-fullscreen"></span>&nbsp;View</a></li>
            <li><a href="followup.php?LeadId=1"><span class="fa fa-edit"></span>&nbsp;Add Lead Update</a></li>
            <li><a href="leadedit.php"><span class="fa fa-edit"></span>&nbsp;Edit</a></li>
            <li><a href="javascript:void(0)" onclick="check_perform_sdelete('14');"><span class="glyphicon glyphicon-trash"></span>&nbsp;Delete</a></li>
          </ul>
        </div>
      </td>
    </tr>

  </tbody>
</table>

Upvotes: 1

Views: 4115

Answers (3)

Belkhodja Samy Mokhtar
Belkhodja Samy Mokhtar

Reputation: 1

You can add

.dt-scroll-body{ min-height:300px; }

To expand table layout

Upvotes: 0

Cary
Cary

Reputation: 376

This is an old one but I was still struggling with it. I added position-static to the dropdown div and that did the trick.

<div class="dropdown position-static">

Upvotes: 0

shyam Jaiswal
shyam Jaiswal

Reputation: 51

Here .dataTables_scrollBody has overflow: auto. You have to remove it but after removing it, structure will destroy. So you have to call Action Box out side of table and then use the position in Action Box. Actually overflow: auto is hiding Action Box which goes to outside of .dataTables_scrollBody.

Upvotes: 1

Related Questions