Experiencing an issue with a Bootstrap split button while working on a test Drupal website. Although it seems to be working fine in Codepen and JSFiddle, on this particular website, the dropdown component appears to be getting pushed under the button. Despite trying various CSS adjustments and suggestions from ChatGPT, nothing seems to resolve the issue. It looks like I need the expertise of a CSS specialist at this point.
To view the problem, visit:
Navigate to Menu>Infrastructure>Location Management to observe the error.
The dropdown for the "Add Location" button should ideally appear to the right of the button. You can refer to the Bootstrap example linked below to see how it should display properly:
https://getbootstrap.com/docs/3.4/components/#btn-dropdowns-split
Thank you for taking the time to read this. Any help or guidance would be greatly appreciated.
Below is the code snippet that I've utilized:
enter code here
<div class="split">
<div class="btn-group">
<button type="button" class="btn btn-warning btn-lg">Add Location</button>
<button type="button" class="btn btn-warning btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="/node/add/location">Location</a></li>
<li><a href="/node/add/ct-building">Building (Campus)</a></li>
<li><a href="/node/add/sublocation">SubLocation</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div>