Bootstrap Action dropdown not working inside table
Bootstrap dropdown doesn't work in both react and desktop because I am using it internally table-responsive
and there is a property overflow
.
can anyone solve it?
thank
.dropdown-toggle{ cursor:pointer;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
<th>Lastname</th>
<th>Password</th>
<th>Phone</th>
<th>Created By</th>
<th>Registration Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
+3
source to share
2 answers
You will find a solution here https://jsfiddle.net/n2omqzpu/1/
$('a[class="dropdown-toggle"]').click(function(){
var pos = $(this).closest('td').position();
var ele = $(this).siblings('ul.dropdown-menu');
var width = $(document).width() - 200;
if( width > pos.left) {
$(ele).css({
left: pos.left,
top: (pos.top + 20)
});
} else {
$(ele).css({
left: (pos.left - 180),
top: (pos.top + 20)
});
}
});
.dropdown-toggle{ cursor:pointer;}
.dropdown-menu{
position:fixed;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Email</th>
<th>Lastname</th>
<th>Password</th>
<th>Phone</th>
<th>Created By</th>
<th>Registration Date</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
<td>Password</td>
<td>Phone</td>
<td>Created By</td>
<td>Registration Date</td>
<td>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-pencil fa-lg"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu menuScroll">
<li><a href="">Details</a></li>
<li><a href="">Document</a></li>
<li><a href="">Care Plan</a></li>
<li><a href="">Health Ins Info</a></li>
<li><a href="">Workers Comp Info</a></li>
<li><a href="">Personal Injury Info</a></li>
<li><a href="">Work Related Injuries</a></li>
<li><a href="">Motor Vehicle Accident</a></li>
<li><a href="">Medical History</a></li>
<li><a href="">Past Appointment</a></li>
<li><a href="">Upcoming Appointment</a></li>
<li><a href="">Authorization</a></li>
<li><a href="">Child Patient</a></li>
<li><a href="">Billing Record</a></li>
</ul>
<a href="/admin/DeletePatient?ID=6476" class="fa fa-trash-o btnDelete" data-toggle="confirmation" style="color:red;" title="" data-original-title="click yes to delete"></a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
A dropdown
small bit of dynamic computation is required to position an element . Make dropdown
as fixed position d.
+1
source to share
It works on my system. Just change your css code like this.
.dropdown-menu {
position: absolute;
top: 100%;
left: -135px;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
If you need, the chenge left has increased or decreased (left: -135px)
0
source to share