Collection create a "not standard" BS5 structure

Collection create a "not standard" BS5 structure

itajackassitajackass Posts: 168Questions: 51Answers: 3

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

  • allanallan Posts: 64,920Questions: 1Answers: 10,752 Site admin

    Thank you - I agree, it looks like I managed to get that one wrong. I've added it to my list to correct.

    Allan

  • allanallan Posts: 64,920Questions: 1Answers: 10,752 Site admin

    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 the ul.

    Many thanks for bringing this up.

    Allan

  • itajackassitajackass Posts: 168Questions: 51Answers: 3

    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

  • allanallan Posts: 64,920Questions: 1Answers: 10,752 Site admin
    Answer ✓

    Use the align option of the button to control the dropdown alignment.

    Allan

Sign In or Register to comment.