I am currently working on a Bootstrap 4 dropdown menu where the clickable items consist of an icon and short text positioned next to the icon. I attempted to align both the icons and text within each element using a table layout, but it seems that the dropdown-item class in Bootstrap is causing interference with the table structure. You can view the issue in this JSfiddle:
Here is the HTML code:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<table class="clickable-rows">
<tbody>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-credit-card-alt"></i></th>
<td>Credit card</td>
</tr>
<tr class="dropdown-item" data-href="#">
<th><i class="fa fa-eur"></i></th>
<td>Cash</td>
</tr>
</tbody>
</table>
</div>
</div>
Javascript used for making rows clickable:
$( document ).ready(function() {
$('table.clickable-rows tr').click(function() {
window.location = $(this).data('href');
});
});
CSS code for cursor styling:
table.clickable-rows td:hover {
cursor: pointer;
}
The current alignment is not as desired, and I am looking to have 'Credit card' and 'Cash' aligned according to the red line, while also ensuring the icons are centered in their respective columns. How can I achieve this layout?
Please note that the CSS and JS provided are for functionality purposes and may not directly address the formatting issue. They are included to demonstrate a complete example.