I've encountered an issue with a bootstrap3 responsive table that includes dropdown selections in each row. When the dropdown is clicked, users have to scroll to view all the options, especially on smaller screens where scrolling becomes impossible.
I've attempted adjusting the z-index and overflow-y properties of the li, ul, and surrounding div elements in CSS to make the options appear on top of the table instead of below it, but so far, I haven't seen any change in behavior.
Similar questions on Stack Overflow haven't provided a working solution:
"dropdown button get cutoff by responsive table in bootstrap 3"
"Bootstrap dropdown menu within a responsive table"
"Responsive table issues in bootstrap"
Is it possible to have the list float above or outside of the responsive table? And if so, how can this be achieved?
jsfiddle:
https://jsfiddle.net/vndyLy1e/3/
html:
<div class="table-responsive">
<table class="table table-striped table-condensed" style="z-index: 1">
<thead>
<tr>
<th class="col-xs-2 col-md-3">Col 1</th>
<th class="col-xs-1 col-md-2">Col 2</th>
<th class="col-xs-1 col-md-2">Col 3</th>
<th class="col-xs-1 col-md-2">Col 4</th>
<th class="col-xs-1 col-md-1">Col 5</th>
<th class="col-xs-1 col-md-1">Col 6</th>
<th class="col-xs-1 col-md-1"></th>
</tr>
</thead>
<tbody class="table-body">
<tr>
<td>$Col 1 Data</td>
<td>$Col 2 Data</td>
<td>$Col 3 Data</td>
<td>$Col 4 Data</td>
<td>$Col 4 Data</td>
<td>$Col 5 Data</td>
<!-- Action Dropdown-->
<td>
<div class="btn-group">
<button type="button" class="btn btn-default btn-transparent btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="title-element-name">Actions </span><span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a>Drop Option 1</a></li>
<li><a>Drop Option 2</a></li>
<li><a>Drop Option 3</a></li>
<li><a>Drop Option 4</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
css:
.dropdown-menu {
overflow-y: visible !important;
z-index: 999;
ul {
overflow-y: visible !important;
}
li {
overflow-y: visible !important;
}
li:hover {
cursor: pointer;
cursor: hand;
}
}
.title-element-name {
color: #FF8200;
font-weight: bold;
}
.table-responsive {
z-index: 999;
overflow-y: auto !important;
}