Akanksha Maurya Akanksha Maurya - 1 month ago 7
CSS Question

how to create dropdown option in bootstrap table <th>

I am trying to make a dropdown in table header like this-

Dropdown Example


<ul class="dropdown-menu" id="dropEmail" style="position:relative; z-index: 99999;">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>

<table id="example3" class="table table-bordered table-striped" style=" overflow-x: scroll;" >
<thead>
<tr>
<th></th>
<th class="dropdown"> <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Inbox</a></li>
<li><a href="#">Drafts</a></li>
<li><a href="#">Sent Items</a></li>
<li class="divider"></li>
<li><a href="#">Trash</a></li>
</ul>
</th>
</tr>
</thead>
<tbody >
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>


But in the front end screen the drop down goes to the back of table body. Setting z- index to 9999 and position relative is not working even.

Answer

if you replace your Messages anchor tag with:

<a class="dropdown-toggle" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Messages</a>

it will work correctly. aria-haspopup="true" will indicate the element will show a menu or flyout when clicked.

fiddle: http://jsfiddle.net/dtchh/#&togetherjs=EL6OONsxV1