Bootstrap dropdown hidden issue in table

In this post we’ll see that, how we can solve the bootstrap dropdown issue when we use the dropdown inside the table or any element with overflow:hidden property. so when you add a bootstrap dropdown button inside a table row and apply the overflow hidden on table container it will hide your dropdown in open state.

For example:

This is sample HTML of your issue:

<div class="lorem-table-wrapper">
				<div class="table-body">
					<table class="table table-striped">
						<thead>
						<tr>
							<th></th>
							<th class="sortable">Column 1</th>
							<th class="sortable">Column 2</th>
							<th class="sortable">Column 3</th>
							<th>Column 4</th>
							<th>Dropdown</th>
						</tr>
						</thead>
						<tbody>
						<tr>
							<td class="new-column"><i class="icon-star-o new-machine" title="New Machine"></i></td><td>Lorem lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
						<tr>
							<td class="new-column"></td><td>Lorem Lipsum</td><td>012345</td><td>10/14/12</td><td>10/14/16</td><td>
							<div class="btn-group">
								<button class="btn dropdown-toggle btn-view" data-toggle="dropdown">
									<span class="visible-desktop toggle-text">Select</span>
									<i class="icon-sort"></i>
								</button>
								<ul class="dropdown-menu pull-right">
									<li><a href="#">Lorem lipsum service</a></li>
									<li><a href="#">Lorem lipsum Content</a></li>
									<li><a href="#">Lorem lipsum</a></li>
									<li><a href="#">Custom</a></li>
									<li><a href="#">Open Requests</a></li>
								</ul>
							</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

and this your css for table wrapper

.lorem-table-wrapper .table-body {
    overflow: visible;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-transition: height 500ms ease-in-out;
    transition: height 500ms ease-in-out;
}

This is your output of your HTML and CSS. you can see dropdown is hidden inside table.

To solve this problem we need to two things:

1. First capture the event of bootstrap dropdown button when dropdown show and hide
   • show.bs.dropdown
   • hide.bs.dropdown
2. Second inside this event we will check the current target offset(.offset()) and outer height of the current target(.outerHeight());

Here is the full code:

var dropdownMenu;
                                  
$('.table-body').on('show.bs.dropdown', function (e) {
    dropdownMenu = $(e.target).find('.dropdown-menu');
    $('body').append(dropdownMenu.detach());
    var eOffset = $(e.target).offset();
    dropdownMenu.css({
        'display': 'block',
        'top': eOffset.top + $(e.target).outerHeight(),
        'left': eOffset.left,
		'width':'184px',
		'font-size':'14px'
    });
	dropdownMenu.addClass("mobPosDropdown");
 });
    
$('.table-body').on('hide.bs.dropdown', function (e) {
    $(e.target).append(dropdownMenu.detach());
    dropdownMenu.hide();
 });

Now run your HTML in browser and see your issue is solved

Thanks for reading. Happy Learning!!!