Collection create a "not standard" BS5 structure
Collection create a "not standard" BS5 structure

Hi I notice i can't use defalt BS5 classes like "dropdown-menu-right" or "dropstart" cause collection in datatables doesn't create a standard BS5 layout (UL + LI). This is my example:
https://live.datatables.net/nohobofu/1/edit
Instead creating a:
<ul class="dropdown-menu">
<li><a class="dt-button dropdown-item" href="#"><span>Excel test</span></a></li>
<li><a class="dt-button dropdown-item" href="#"><span>Excel test 2</span></a></li>
</ul>
actually it is created as:
<div role="menu">
<a class="dt-button dropdown-item" aria-controls="example" href="#" tabindex="0"><span>Excel test</span></a>
<a class="dt-button dropdown-item" aria-controls="example" href="#" tabindex="0"><span>Excel test 2</span></a>
</div>
I don't know why but in this old example using BS3 structure is correct (UL + LI): https://datatables.net/extensions/buttons/examples/styling/bootstrap.html
This question has an accepted answers - jump to answer
Answers
Thank you - I agree, it looks like I managed to get that one wrong. I've added it to my list to correct.
Allan
I've committed a change that brings the structure much closer to the Bootstrap standard. I need to use a wrapper
div
as the dropdown can also be styled to appear as a "fixed" position pop up, rather like a modal, and also there can be a title element. As such the styling for the popover needs to be moved up to that level, rather than on theul
.Many thanks for bringing this up.
Allan
Thank you. I'm trying to add dropleft now but nothing change. Still have dropdown buttons at the righe of the screen cutout if too long, and caret still on the right
Use the
align
option of the button to control the dropdown alignment.Allan