I'm struggling to get the Action Box displayed as an upper layer. I've already tried using z-index but it doesn't seem to make any difference.
https://i.stack.imgur.com/rJ1vL.png
$(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> View</a></li>
<li><a href="followup.php?LeadId=1"><span class="fa fa-edit"></span> Add Lead Update</a></li>
<li><a href="leadedit.php"><span class="fa fa-edit"></span> Edit</a></li>
<li><a href="javascript:void(0)" onclick="check_perform_sdelete('14');"><span class="glyphicon glyphicon-trash"></span> Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>