I'm struggling with the layout of my table header buttons. Whenever I add a dropdown button, it messes up the alignment and makes the whole thing look unattractive. Here's the code for my dropdown button:
<div class="dropdown">
<button class="btn btn-link btn-sm dropdown-toggle" type="button"
id="dropdownMenu2" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Download
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button id="btnExport" class="dropdown-item" type="button"
onclick="exportReportToExcel(this)">Excel
</button>
<button class="dropdown-item" type="button" id="downloadPdf">PDF
</button>
</div>
</div>
Here are the other buttons in my table header:
<div class="col text-right">
<button type="submit" form="selecties" formaction="<?php echo base_url("/crud/email_multiple") ?>"
class="btn btn-outline-secondary btn-sm">Email
</button>
<?php if ($userInfo["rights"] == 'admin') : ?>
<button type="submit" form="selecties"
formaction="<?php echo base_url("/crud/delete_multiple") ?>"
class="btn btn-outline-danger btn-sm">Delete
</button>
<a href="<?php echo base_url("/crud/add") ?>"
class="btn btn-outline-success btn-sm">Add Data
</a>
<?php endif; ?>
</div>
I'm trying to position my dropdown button next to the other buttons, but it seems that the alignment is off because the dropdown is a div and not a button. When I place the dropdown inside the same div as the buttons, it appears vertically above the other buttons instead of beside them. Any suggestions on how to fix this issue would be greatly appreciated!